Comment faire pour estomper ou pour ajouter de la transparence à fontawesome icône

Je suis en utilisant bootstrap et fontawesome. J'ai une liste à puce comme ça:

<ul class="fa-ul lead">
    <li class="m"><i class="fa-li fa fa-2x fa-check"></i><p>Text.</p></li>
    <li class="m"><i class="fa-li fa fa-2x fa-check"></i><p>Text.</p></li>
    <li class="m"><i class="fa-li fa fa-2x fa-check"></i><p>Text.</p></li>
    <li class="m"><i class="fa-li fa fa-2x fa-check"></i><p>Text.</p></li>  
</ul>

Les icônes fa produit un peu trop riche et vivante. Je veux ajouter un peu de transparence ou quelque chose pour rendre la recherche n'est pas tellement vives. Est il possible que je peux le faire sans aucune custom css?

Mise à JOUR:
En disant custom css je voulais dire que peut être il y a quelques bootstrap ou fontawesome classes css existe déjà pour le faire. J'ai donc été à la recherche pour le css solution.

Pourquoi pas de css personnalisé? À l'aide de l'opacité ou de couleur rvba est probablement la voie à suivre.
J'ai enlevé le twitter-bootstrap tag que cette question n'est pas liée à elle.
C'est le raison css existe. Pourquoi ne voulez-vous pas l'utilisation exacte de la chose qui contrôle la façon dont les éléments sont affichés et le style d'une page?

OriginalL'auteur sreginogemoh | 2014-12-19

  1. 12

    Comme indiqué sur la Police Impressionnant de la page d'accueil:

    Police Génial vous donne scalable vector icônes qui peut instantanément être personnalisés — la taille, la couleur, l'ombre portée, et tout ce qui peut être fait avec la puissance de CSS.

    Il n'y a absolument aucune raison pas à utiliser les CSS, donc sans tenir compte de votre condition de ne pas utiliser de CSS, je vais vous donner un CSS solution de toute façon et vous suggérons d'utiliser ce lieu de non-CSS solution que j'ai également fournis:

    CSS Solution

    Police Impressionnant icônes sont des caractères contenus dans la police. Cela les rend régulièrement de texte, vous permettant de style de caractères comme vous le feriez pour un texte normal.

    .fa-li.fa.fa-2x.fa-check {
    opacity: 0.75;                /* Opacity (Transparency) */
    color: rgba(0, 0, 0, 0.75);   /* RGBA Color (Alternative Transparency) */
    -webkit-filter: blur(2px);    /* Blur */
    -moz-filter: blur(2px);
    filter: blur(2px);
}

    Une meilleure solution pourrait être simplement de changer la couleur de vos icônes pour quelque chose de moins important:

    .fa-li.fa.fa-2x.fa-check {
    color: #444;
}

    Non-CSS Solution

    Si vous vraiment souhaitez un non-CSS solution, comme vous l'avez indiqué dans la question, une chose que vous pourriez faire est de sauvegarder l'icône est une image et de jouer avec elle dans un logiciel de retouche d'image pour appliquer l'effet que vous recherchez. Alors, au lieu d'ajouter l'icône à l'aide de la condition de la Police Génial CSS, vous pouvez télécharger l'image sur votre serveur et de l'inclure comme un img élément:

    <img src="path/to/my-modified-fa-icon.png" alt="fa-check" />

    OriginalL'auteur James Donnelly

  2. 5

    comment sur

    .fa{
    opacity:0.5;
}

    C'est en supposant que vous voulez que tous les fa icônes un peu de "voir à travers" on peut bien sûr toujours changer la couleur aussi, donc peut-être utiliser le gris au lieu de noir

    .fa{
    color:#878787;
}

    Si vous voulez seulement le style de cette liste, fa essayer

    .m .fa{
    opacity:0.5;
}

    ou si vous utilisez sass/less

    .m{
    .fa{
        opacity:0.5;
    }
}

    OriginalL'auteur atmd

  3. 0

    Choisir une teinte foncée que la mise en place de votre INTERFACE utilisateur de ici et de l'utiliser comme ci-dessous.
    Si par exemple vous avez sélectionné la couleur #ddd, ajouter le dessous de style CSS

    ul.lead .fa{
    color: #ddd
}

    OriginalL'auteur su8898