Want to make Font Awesome icons clickable

Question

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     lt i class  fa fa-dribbble fa-4x  gt  lt  i gt    lt i class  fa fa-behance-square fa-4x  gt  lt  i gt    lt i class  fa fa-linkedin-square fa-4x  gt  lt  i gt    lt i class  fa fa-twitter-square fa-4x  gt  lt  i gt    lt i class  fa fa-facebook-square fa-4x  gt  lt  i gt    I d like for each of these icons to go to their respective profiles  Any suggestions

User · Answer

Using bootstrap with font awesome     lt a class  btn btn-large btn-primary logout  href     gt           lt i class  fa fa-sign-out  aria-hidden  true  gt Logout lt  i gt   lt  a gt

User · Answer

Please use Like below   lt a style  quot cursor  pointer quot     click   quot yourFunctionComponent   quot     gt   lt i class  quot fa fa-dribbble fa-4x quot  gt  lt  i gt    lt  a gt    The above can be used so that the fa icon will be shown and also on the click function you could write your logic

User · Answer

lt a href     gt  lt i class  fab fa-facebook-square  gt  lt  i gt  lt  a gt                 lt a href     gt  lt i class  fab fa-twitter-square  gt  lt  i gt  lt  a gt                 lt a href     gt  lt i class  fas fa-basketball-ball  gt  lt  i gt  lt  a gt                 lt a href     gt  lt i class  fab fa-google-plus-square  gt  lt  i gt  lt  a gt                  All you have to do is wrap your font-awesome icon link in your HTML                                 with an anchor tag          Following this format                      lt a href  Link here  gt   lt font-awesome icon code gt   lt  a gt

User · Answer

You can wrap those elements in anchor tag like this  lt a href  quot your link here quot  gt   lt i class  quot fa fa-dribbble fa-4x quot  gt  lt  i gt  lt  a gt   lt a href  quot your link here quot  gt   lt i class  quot fa fa-behance-square fa-4x quot  gt  lt  i gt  lt  a gt   lt a href  quot your link here quot  gt   lt i class  quot fa fa-linkedin-square fa-4x quot  gt  lt  i gt  lt  a gt   lt a href  quot your link here quot  gt   lt i class  quot fa fa-twitter-square fa-4x quot  gt  lt  i gt  lt  a gt   lt a href  quot your link here quot  gt   lt i class  quot fa fa-facebook-square fa-4x quot  gt  lt  i gt  lt  a gt   Note  Replace href  quot your link here quot  with your desired link e g  href  quot https   www stackoverflow com quot

User · Answer

I found this worked best for my usecase    lt i class  btn btn-light fa fa-dribbble fa-4x  href     gt  lt  i gt   lt i class  btn btn-light fa fa-behance-square fa-4x  href     gt  lt  i gt   lt i class  btn btn-light fa fa-linkedin-square fa-4x  href     gt  lt  i gt   lt i class  btn btn-light fa fa-twitter-square fa-4x  href     gt  lt  i gt   lt i class  btn btn-light fa fa-facebook-square fa-4x  href     gt  lt  i gt

User · Answer

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      lt i class  fa fa-dribbble fa-4x fa-clickable  id  epd-dribble  gt  lt  i gt    lt i class  fa fa-behance-square fa-4x fa-clickable  id  epd-behance  gt  lt  i gt    lt i class  fa fa-linkedin-square fa-4x fa-clickable  id  epd-linkedin  gt  lt  i gt    lt i class  fa fa-twitter-square fa-4x fa-clickable  id  epd-twitter  gt  lt  i gt    lt i class  fa fa-facebook-square fa-4x fa-clickable  id  epd-facebook  gt  lt  i gt    Then add a handler in your jQuery    document  on  click    i   function        switch  this id            case  epd-dribble                  do stuff             break             add additional cases

User · Answer

If you don t want it to add it to a link  you can just enclose it within a span and that would work    lt span id  clickableAwesomeFont  gt  lt i class  fa fa-behance-square fa-4x  gt  lt  span gt   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

[html] Want to make Font Awesome icons clickable

Examples related to html

Examples related to font-awesome