2013-09-02 3 views
4

Je donne les résultats suivants:Comment ajouter un lien <a> à une icône dans le bootstrap?

<a href="http://www.website.com" title="Website name">Website Link</a> 

et

<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i> 

Quelqu'un peut-il me expliquer comment je peux combiner ces derniers dans bootstrap avec la police des icônes impressionnantes que j'utilise. Est-ce que je mets le <a> à l'intérieur du <i> ou le <i> à l'intérieur du <a> ou les deux doivent-ils être à l'intérieur d'un <div>?

Répondre

3

Mettre le <i> dans la <a>

Par exemple,

<a href="http://www.website.com" title="Website name"><i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>Website Link</a> 
+0

Merci. J'ai essayé ceci mais il y a une ligne qui apparaît sous mon icône quand je fais ceci :-( – Melina

+0

C'est le CSS par défaut 'a' qui est appliqué. Vous devez le réinitialiser en ajoutant ce CSS.' A {text-decoration : none, border: none;} '. J'espère que cela aide. - @Melina – Nitesh

2

Avec cela, seule l'icône affichera:

<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i> 

Avec cela, un lien texte sera affiché:

<a href="http://www.website.com" title="Website name">Website Link</a> 

Si vous souhaitez afficher le texte et l'icône avec les deux étant un lien puis utilisez ce qui suit, ce qui met la balise i dans la balise a:

<a href="http://www.website.com" title="Website name"> <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>Website Link</a> 
Questions connexes