Menu
So I am new to web development and I am trying to link font awesome icons to my social profiles but am unsure of how to do that. I tried using an a href tag but it made all of the icons take me to one site instead of the one I wanted. Here is the code:
<i class="fa fa-dribbble fa-4x"></i> <i class="fa fa-behance-square fa-4x"></i> <i class="fa fa-linkedin-square fa-4x"></i> <i class="fa fa-twitter-square fa-4x"></i> <i class="fa fa-facebook-square fa-4x"></i> I'd like for each of these icons to go to their respective profiles. Any suggestions?
1000
You place Font Awesome icons by using the prefix fa and the icon's name.
First make sure you have added Font Awesome Icon library. If this library is added just add the HTML css class fa fa-anchor to any element to add the icon. Font Awesome anchor Icon can be resized as per your need. You can manage size of icon(fa fa anchor) by using font-size css style.
In order to do this whilst retaining the <input> element, you must put the Font Awesome glyph outside of the <input> and then simply position it on top. Then simply add some CSS to make the whole button clickable.
These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements. To include Font Awesome in your app or page, just add the following code to the <head> element at the top of your HTML:
Font Awesome is a convenient library of icons. These icons can be vector graphics stored in the .svg file format or web fonts. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.
In your css add a class: .fa-clickable { cursor:pointer; outline:none; } Then add the class to the clickable fontawesome icons (also an id so you can differentiate the clicks):
Set up Font Awesome in your project and know where you parked your tardis. The icon name, prefixed with fa- (meaning "Font Awesome" naturally!) There are six styles of Font Awesome — Each has a unique class name and font-weight. Here are examples:
You can wrap those elements in anchor tag
like this
<a href="your link here"> <i class="fa fa-dribbble fa-4x"></i></a> <a href="your link here"> <i class="fa fa-behance-square fa-4x"></i></a> <a href="your link here"> <i class="fa fa-linkedin-square fa-4x"></i></a> <a href="your link here"> <i class="fa fa-twitter-square fa-4x"></i></a> <a href="your link here"> <i class="fa fa-facebook-square fa-4x"></i></a> Note: Replace href="your link here" with your desired link e.g. href="https://www.stackoverflow.com".
109
If you don't want it to add it to a link, you can just enclose it within a span and that would work.
<span id='clickableAwesomeFont'><i class="fa fa-behance-square fa-4x"></span>
in your css, then you can:
#clickableAwesomeFont { cursor: pointer } Then in java script, you can just add a click handler.
In cases where it's actually not a link, I think this is much cleaner and using a link would be changing its semantics and abusing its meaning.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
