Comment puis-je éviter text-decoration sur les icônes lors de l'utilisation de font-awesome dans un lien?

J'ai juste commencé à l'aide de FontAwesome, so far so good. Une question cependant, lorsque je l'utilise avec une balise d'ancrage et il a text-decoration:none, et sur le vol stationnaire text-decoration:underline. Quand je survole le lien, l'icône devient le souligner effet, trop...comment puis-je obtenir seulement le lien pour être souligné, pas l'icône?

J'ai essayé de le placer à l'extérieur de la balise d'ancrage, mais il ne reçoit pas la couleur, j'ai attribué le lien

Exemple de code:

<style>
  a{color:red;text-decoration:none;}
  a:hover{text-decoration:underline;}
</style>

<a href="#"><span class="fa fa-camera-retro"> </span>This's a test</a>

Merci

OriginalL'auteur tony | 2014-10-23

  1. 1

    J'ai eu un problème similaire, et a constaté que la fa classe définit un inline-block mode d'affichage. Si j'ai forcé le display à inline à l'intérieur d'un lien, alors que tout allait bien.

    a > .fa {
  display: inline;
}

    OriginalL'auteur Zoltán Tamási

  2. 0

    Mettre votre <span> à l'extérieur de la <a> donc ce n'est pas touchée par votre hover...

    <span class="fa fa-camera-retro"></span><a href="#">This is a test</a>
    En général les gens comme l'icône de faire partie de la liaison, en particulier pour les mobiles.

    OriginalL'auteur Eeji

  3. 0

    Vous pouvez ajouter un style pour le a:hover span.fa sélecteur:

    <style>
  a {
    color: red;
    text-decoration: none;
  }

  a:hover span.fa {
    text-decoration: none;
  }
</style>

<a href="#"><span class="fa fa-camera-retro"></span> This is a test</a>
    pourriez-vous donner des exemples de codes concernant la FYI? J'ai utilisé le code exact de fontawesome site, mais au lieu de <i class="fa fa-caméra-rétro"></i> (il en italique l'icône), je change le <i partie à un <span class="fa fa-caméra-rétro"></span>
    J'étais totalement trompé sur mon FYI et l'a supprimé, désolé. Je l'ai eu en arrière... Juste comme vous l'avez fait, 'fa' est correct pour 4.x; désolé pour la confusion

    OriginalL'auteur Kabb5