Vous êtes ici : Blog > Programmation > Cibler les liens externes pour ajouter une icône Awesome

Cibler les liens externes pour ajouter une icône Awesome

Pas de commentaire

Voici une astuce CSS3 pour cibler les liens hypertextes avec une cible externe (target blank) et comment ajouter une icône FontAwesome à côté de celui-ci.

Bibliothèque FontAwesome :

Il faudra donc au préalable importer la police FontAwesome sur votre site, soit avec la ressource distante soit directement sur votre serveur.

Pour l'import depuis un serveur externe, cela donnerait par exemple :

Le code final :

Il suffit maintenant de cibler les liens où l'attribut target est "_blank" puis d'utiliser la pseudo classe "after" (ou "before" à votre convenance) pour ajouter l'icône après ou avant votre lien. Pour insérer l'icône après votre lien, on ajoutera également un padding-left pour la mise en forme.

Liens hypertextes externes

Voir un exemple

Ressources :

etalon.com.ua/
bonacousa.com/
goodgoods.com.ua/
jaamboo.com.ua
 
Article publié le 26/01/2016 avec 613 Vues

Laissez un commentaire :