Remplacer le texte avec une icône avec les css

Je veux utiliser la police impressionnant icônes pour un balisage qui est généré automatiquement et je ne peux pas changer cela.

Le balisage suivant affiche la ol liste. Je veux remplacer les nombres avec les icônes.

<ol class="flex-control-nav">
    <li><a class="flex-active">1</a></li>
    <li><a class="">2</a></li>
    <li><a class="">3</a></li>
    <li><a class="">4</a></li>
    <li><a class="">5</a></li>
</ol>

Voici ce que j'essaie:

.flex-control-nav a:before  { 
    font-family: FontAwesome; 
    font-size: 30px; 
    display: inline-block; 
    content: '\f137';
}

Problème:

Avec le code ci-dessus, je peux afficher les icônes dans chaque élément de la liste, cependant, les chiffres sont là aussi. Je veux cacher les chiffres. J'ai essayé d'utiliser text-indent, mais qui supprime les icônes.

OriginalL'auteur user2738640 | 2013-10-07

  1. 18

    Suffit d'utiliser 

    .flex-control-nav a
{
    font-size:0;
}

    Voici un Travail Violon

    OU:

    .flex-control-nav a
{
    visibility: hidden;
}
.flex-control-nav a:before
{
    visibility: visible;
}

    Voici un Travail Violon

    Merci beaucoup 🙂
    Sachez que les numéros (contenu texte) va encore prendre de l'espace dans le flux de documents lors de l'utilisation de visibility:hidden.
    c'est pourquoi je préfère ma première réponse.
    Notez que si vous utilisez la première approche .flex-contrôle-nav a:avant de la taille de police ne peut pas être en ems, parce que la taille de la police de l'élément parent est 0, et le nombre de fois 0 est égal à 0.
    L'ajout de display: inline-block; white-space: nowrap; width: 1em; à la a élément supprime l'espace supplémentaire du contenu lui-même: jsfiddle.net/HYxZt/68.

    OriginalL'auteur avrahamcool

  2. 3

    EDIT: je pense que j'ai vraiment mal compris ce que vous demandez, mais dans le cas où quelqu'un voulait savoir comment se débarrasser de la ol numéros et de les remplacer avec les icônes, voici une solution.

    En gros, je me suis débarrassé de la liste des numéros avec list-style-type: none; attaché à la li éléments. Ensuite, j'ai ajouté une marge à gauche de la ol après s'être débarrassé de son par défaut. Enfin, j'ai pris les icônes de l'écoulement de la page et déplacé vers la gauche avec une marge négative depuis qui ne repose pas sur la boîte englobante de positionnement. Comme une note de côté, j'ai fait le line-height de chacun des éléments de la liste de la même que la font-size des icônes de sorte que les éléments de la liste serait espacés de manière appropriée.

    CSS:

    .flex-control-nav {
    padding: 0;
    margin: 0;
    margin-left: 40px;
}
.flex-control-nav li  {
    line-height: 30px;
    list-style-type: none;
}
.flex-control-nav li:before  { 
    font-family: FontAwesome; 
    font-size: 30px;
    position: absolute;
    margin-left: -30px;
    content: '\f137';
}

    JSBin ici.

    J'étais juste sur le point de publier un commentaire lorsque vous avez modifié.. lol. +1 de moi.
    Ouais, j'étais comme, "Attendez une minute..." Merci, et Désolé pour la confusion tout le monde. 😛

    OriginalL'auteur SombreErmine