Jump to content


Photo
- - - - -

Assign link with an icon font

icon font link link icon font

Best Answer Danny , 12 March 2014 - 11:24 AM

Hi,

 

If you want to give anything a link, your code has to be wrapped between the <a> </a> tags.

For example:

 

<a href="#"><i class="icon-coffee" ></i></a>

 

Explanation:

 

<a href="#">     <!--Start of link-->

<i class="icon-coffee" ></i>     <!--Icon Start/end-->

</a>     <!--End of link-->

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 12 March 2014 - 07:55 AM

Ho do I assign a link with an icon font? May be I'm wrong with the following code

 
<div style="font-size: 24px;">
      <i class="icon-coffee" ></i> <a href="http://www.techgainer.com"></a>
</div>

 



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15194 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 March 2014 - 11:24 AM   Best Answer

Hi,

 

If you want to give anything a link, your code has to be wrapped between the <a> </a> tags.

For example:

 

<a href="#"><i class="icon-coffee" ></i></a>

 

Explanation:

 

<a href="#">     <!--Start of link-->

<i class="icon-coffee" ></i>     <!--Icon Start/end-->

</a>     <!--End of link-->


  • rijans likes this

#3 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 12 March 2014 - 11:30 AM

Code: 

 
<a href="http://www.techgainer.com"><img src="http://cdn.techgainer.com/2014/03/22951.png" alt="TechGainer Home" style="float:left width="229" height="51"> </a>

SIte:Techgainer.com   (The code is not live on the site right now. )



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15194 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 March 2014 - 11:36 AM

Not sure what you mean by that code, I don't see any icon font in your code ?



#5 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 12 March 2014 - 06:10 PM

Sorry I'm supposed to post it on another thread! Mistake. Can you make my post down?



#6 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 12 March 2014 - 06:42 PM

@Danny

Yes its working! But icons coming vertically! > http://screencast.com/t/9eMiG1wrlg

 

But I want them horizontally....is the <i> tag guilty?

Here's my code >

 
<div style="font-size: 24px;">
<a href="http://facebook.com/techgainer"><i class="icon-facebook" ></i></a>
<a href="http://twitter.com/techgainer"><i class="icon-twitter" ></i></a>
<a href="http://plus.google.com/+techgainer"><i class="icon-google-plus" ></i></a>
</div>

Site: techgainer.com



#7 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 12 March 2014 - 07:34 PM

Fixed that problem!



#8 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 March 2014 - 11:51 PM

Glad you managed to resolve, thank you for updating the thread.







Also tagged with one or more of these keywords: icon font link, link, icon, font