CODEWITHSUNDEEP
htmlfont-awesome
tiffanywhitedev
tiffanywhitedev

Reputation: 867

Want to make Font Awesome icons clickable

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?

Upvotes: 70

Views: 225951

Answers (8)

Deepak Kumar
Deepak Kumar

Reputation: 51

Simply add font awesome icons into the anchor tag and then change the anchor color in CSS. Here is an example:

HTML CODE

<a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fab fa-linkedin fa-4x"
                    id="social-icons-linkedin"></i></a>

            <a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fab fa-facebook fa-4x"
                    id="social-icons-facebook"></i></a>

            <a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fab fa-twitter fa-4x"
                    id="social-icons-twitter"></i></a>
                    
            <a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fas fa-envelope fa-4x"
                    id="social-icons-mail"></i></a>

CSS

Let's change the default color to black.

.icons-default{color: black;}

Upvotes: -2

shyammakwana.me
shyammakwana.me

Reputation: 5752

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".

Upvotes: 103

shuaib
shuaib

Reputation: 71

Please use Like below.
<a style="cursor: pointer" **(click)="yourFunctionComponent()"** >
<i class="fa fa-dribbble fa-4x"></i>
 </a>

The above can be used so that the fa icon will be shown and also on the click function you could write your logic.

Upvotes: 0

Timilehin
Timilehin

Reputation: 9

             <a href="#"><i class="fab fa-facebook-square"></i></a> 
             <a href="#"><i class="fab fa-twitter-square"></i></a> 
             <a href="#"><i class="fas fa-basketball-ball"></i></a> 
             <a href="#"><i class="fab fa-google-plus-square"></i></a>


              All you have to do is wrap your font-awesome icon link in your HTML 
                               with an anchor tag.
        Following this format:
                   <a href="Link here"> <font-awesome icon code> </a>

Upvotes: -1

Eric D&#39;Souza
Eric D&#39;Souza

Reputation: 690

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):

 <i class="fa fa-dribbble fa-4x fa-clickable" id="epd-dribble"></i>
 <i class="fa fa-behance-square fa-4x fa-clickable" id="epd-behance"></i>
 <i class="fa fa-linkedin-square fa-4x fa-clickable" id="epd-linkedin"></i>
 <i class="fa fa-twitter-square fa-4x fa-clickable" id="epd-twitter"></i>
 <i class="fa fa-facebook-square fa-4x fa-clickable" id="epd-facebook"></i>

Then add a handler in your jQuery

$(document).on("click", "i", function(){
    switch (this.id) {
        case "epd-dribble":
            // do stuff
            break;
        // add additional cases
    }
});

Upvotes: -1

wattry
wattry

Reputation: 994

I found this worked best for my usecase:

<i class="btn btn-light fa fa-dribbble fa-4x" href="#"></i>
<i class="btn btn-light fa fa-behance-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-linkedin-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-twitter-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-facebook-square fa-4x" href="#"></i>

Upvotes: 7

Neo M Hacker
Neo M Hacker

Reputation: 909

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.

Upvotes: 43

Puneeth Reddy V
Puneeth Reddy V

Reputation: 1578

Using bootstrap with font awesome. 

<a class="btn btn-large btn-primary logout" href="#">
        <i class="fa fa-sign-out" aria-hidden="true">Logout</i>
</a>

Upvotes: 9

Related Questions