Comment utiliser <i> étiquette avec les icônes?

J'ai un ensemble d'icônes et le code CSS pour lier les icônes à un élément, mais je ne peux pas obtenir le "je" balise de travailler avec l'icône set w/o de le remplir avec le contenu. Dois-je ajouter du code personnalisé pour la balise?

J'ai vu de Twitter Bootstrap utiliser le "je" balise pour les icônes.
Aussi, j'ai essayé la balise span, et que cela ne fonctionne pas. Il fonctionne lorsque j'utilise le "li" ou "div" balises, tho.

Ce qui me manque? Merci à l'avance!

Cela ne pas travail

<i class="icon icon-accessibility"></i>

Ce œuvres

<i class="icon icon-accessibility">BLAH</i>

exemple de mon CSS

.icon {background: url('/images/icons.png') no-repeat top left;}
.icon-accessibility{ background-position: 0 0; width: 32px; height: 32px; }
pourquoi ne pas utiliser un div avec font-style:italic, je ne crois pas que j'ai est un élément de type block.
Je veux utiliser les icônes à l'intérieur de balises d'en-tête, et le DIV n'est pas un élément valide à l'intérieur des en-têtes. Je ne veux pas le texte en italique, merci de lire ma question encore une fois.
Le twitter bootstrap utilise cette balise parce que le CSS a été faite pour cela. Dans elle il y a une "cartographie" de la position de l'image qui est la partie désirée. Voir Sprites CSS
PiLHA, si vous avez lu ma question, vous pouvez également voir que j'ai fait une spritemap.

OriginalL'auteur Fredrik Westerlund | 2013-07-04

  1. 8

    La <i> tag est utilisé pour signifier que le texte doit être en italique. Il n'est pas judicieux de l'utiliser dans ce contexte.

    Si vous avez encore envie de la garder et de ne pas utiliser autre chose comme un div, le problème est que le <i> balise est un élément inline, pas un élément de bloc comme un div. Ajouter display: inline-block; à votre CSS et il va fonctionner.

    Merci, j'ai seulement essayé display:block. inline-block travaillé! la je balise sémantique avec "icône" et utilise moins de texte, c'est un bon moyen de lier les icônes.
    Il peut être une bonne idée d'utiliser <span> avec display:inline-block à la place si vous avez besoin de soutien IE7, qui prend uniquement en charge les inline-block sur des éléments qui sont display:inline par défaut.

    OriginalL'auteur Fiona - myaccessible.website

  2. 2

    Brthr, il suffit d'ajouter un 'display: inline-block' votre '.icône", il peut travailler

    OriginalL'auteur Salih K

  3. 1

    Sémantique de côté, vous ne voyez pas tout, parce que la <i/> élément est inline par défaut. Il est probable que vous souhaitez ajouter display: inline-block; à la .icon jeu de règles pour correspondre à la façon dont Bootstrap rend leurs icônes.

    Si vous vous souciez de la sémantique, l'utilisation d'un <div/> ou <span/> à la place.

    oui, merci! Je pense que le <i> tag est plus adapté pour les icônes dans mon contexte. J'ai également suivi un autre thread ici que plaide pour le bénéfice de <i> tag pour les icônes. stackoverflow.com/questions/11135261/i-tag-for-icons
    Je ne pense pas que c'est en tant que grand d'une affaire comme certaines personnes le font dehors pour être. La sémantique autour de <i/> (et <b/>) sont assez vaguement défini, comme c'est évident dans le fil que vous avez lié. Un <i/> sans texte porte pas de signification intrinsèque, de sorte qu'il est parfaitement acceptable (OMI) pour l'utiliser comme un moyen de montrer purement des éléments de présentation.
    Je pense que l'italique <i> tag est censé être obsolète et remplacé par <em> de toute façon, alors pourquoi ne pas mettre les chômeurs <i> à la bonne utilisation.

    OriginalL'auteur André Dion

  4. 0

    Vous pouvez simplement utiliser un img balise pour afficher l'icône. Cela fait plus de sens du point de vue sémantique, car il est intégré au contenu, après tout, et l'icône sera palpable.

    Je suppose qu'il est à l'aide d'un sprite fondée sur le fragment, nous avons
    Je suis à l'aide de CSS spritemaps, de sorte que le <img> tag ne serait pas d'une grande aide. Merci quand même!
    vous pouvez toujours le faire avec un <img> tag, mais vous auriez besoin d'un tag pour couvrir tout ce qui l'entoure
    Eh bien, ce n'est pas la solution, je suis après. Eu travaille maintenant tho, merci 🙂

    OriginalL'auteur Explosion Pills