web-dev-qa-db-fra.com

Vous voulez rendre les icônes de Font Awesome cliquables

Je suis donc novice en développement Web et j'essaie de lier des icônes de police géniales à mes profils sociaux, mais je ne sais pas comment faire. J'ai essayé d'utiliser une balise href, mais toutes les icônes m'ont emmenée sur un site au lieu de celui que je voulais. Voici le 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>

J'aimerais que chacune de ces icônes aille dans leur profil respectif. Aucune suggestion?

htmlfont-awesome
35
twhite96

Vous pouvez envelopper ces éléments dans la balise anchor

comme ça

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

Remarque: remplacez href par votre lien souhaité.

55
shyammakwana.me

Si vous ne voulez pas l'ajouter à un lien, vous pouvez simplement l'enfermer dans un intervalle et cela fonctionnerait.

<span id='clickableAwesomeFont'><i class="fa fa-behance-square fa-4x"></span>

dans votre css, alors vous pouvez:

#clickableAwesomeFont {
     cursor: pointer
}

Ensuite, dans le script Java, vous pouvez simplement ajouter un gestionnaire de clics.

Dans les cas où il s'agit et non d'un lien, je pense que cela est beaucoup plus propre et que l'utilisation d'un lien modifierait sa sémantique et en abuserait.

25
Neo M Hacker

Utiliser bootstrap avec une police géniale.

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

J'ai trouvé que cela fonctionnait le mieux pour mon cas d'utilisation:

<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>
2
Ryan

Dans votre css, ajoutez une classe:

.fa-clickable {
    cursor:pointer;
    outline:none;
}

Ajoutez ensuite la classe aux icônes de fontawesome cliquables (également un identifiant vous permettant de différencier les clics):

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

Ajoutez ensuite un gestionnaire dans votre jQuery

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