Modifier le poids de la police des icônes FontAwesome ?

Question

J'aimerais que l'une des icônes de FontAwesome soit un peu moins lourde - elle est beaucoup plus lourde que la police que j'utilise. Voici à quoi elle ressemble actuellement :

:

C'est moche, non ? J'ai donc essayé de réinitialiser le poids de la police comme suit :

.tag .icon-remove  { 
  font-weight: 100;
}

L'attribut semble être correctement défini dans le CSS, mais il n'a aucun effet - l'icône semble aussi lourde qu'auparavant. J'ai également essayé font-weight: lighter y -webkit-text-stroke-width: 1px sans effet.

Y a-t-il un moyen de rendre l'icône moins lourde ? La documentation dit " Tout ce que vous pouvez faire avec les styles de police CSS, vous pouvez le faire avec Font Awesome. "mais je n'arrive pas à comprendre comment faire.

Answer 1

Les navigateurs Webkit permettent d'ajouter un "trait" aux polices de caractères. Cet élément de style donne aux polices un aspect plus fin (en supposant un fond blanc) :

-webkit-text-stroke: 2px white;

Exemple sur codepen ici : http://codepen.io/mackdoyle/pen/yrgEH Certains utilisent le SVG comme une solution "trait" multiplateforme : http://codepen.io/CrocoDillon/pen/dGIsK

Answer 2

Mise à jour 2018

Font Awesome 5 propose désormais lumière , régulière y solide variantes. L'icône présentée dans cette question a le style suivant selon les différentes variantes :

Une réponse moderne à cette question serait que différentes variantes de l'icône peuvent être utilisées pour que l'icône apparaisse plus grasse ou plus claire. Le seul inconvénient est que si vous utilisez déjà l'icône solide vous devrez revenir aux réponses originales ici pour les rendre plus audacieuses, et de même si vous utilisez lumière il faudrait faire la même chose pour les alléger.

Font Awesome Comment l'utiliser explique comment utiliser ces variantes.

---

Réponse originale

Font Awesome utilise la fonction Région à usage privé d'Unicode . Par exemple, cette .icon-remove que vous utilisez est ajouté à l'aide du ::before en fixant son contenu à \f00d (  ):

.icon-remove:before {
    content: "\f00d";
}

Font Awesome ne propose qu'une seule variante de poids de police, mais les navigateurs l'afficheront de la même manière qu'ils afficheraient n'importe quelle police ne comportant qu'une seule variante. Si vous regardez de près, l'élément normal n'est pas aussi audacieuse que l'option bold poids de la police. Malheureusement, un poids de police normal n'est pas ce que vous recherchez.

Vous pouvez toutefois changer sa couleur pour une couleur moins foncée et réduire la taille de la police pour qu'elle soit moins visible. D'après votre image, le texte "tags" semble beaucoup plus clair que l'icône, je vous suggérerais donc d'utiliser quelque chose comme :

.tag .icon-remove {
    color:#888;
    font-size:14px;
}

Voici une Exemple de JSFiddle y aquí est une preuve supplémentaire qu'il s'agit bien d'une police de caractères.

Answer 3

Juste pour aider les personnes qui consultent cette page. Il s'agit d'une alternative si vous êtes prêt à utiliser une autre bibliothèque d'icônes.

James a raison de dire qu'il n'est pas possible de modifier le poids de la police. Toutefois, si vous recherchez un aspect plus moderne pour les icônes, vous pouvez envisager les options suivantes ionicons

Il existe des versions ios et Android pour les icônes.

Answer 4

L'auteur semble avoir adopté une approche freemium pour la bibliothèque de polices et fournit Cravate noire pour donner des poids différents à la bibliothèque Font-Awesome.

Answer 5

Une autre solution que j'ai utilisée pour créer des icônes fontawesome plus légères, similaires à la solution webkit-text-stroke mais plus portable, consiste à définir la couleur de l'icône comme celle de l'arrière-plan (ou transparente) et à utiliser l'ombre du texte pour créer un contour :

.fa-outline-dark-gray {
    color: #fff;
    text-shadow: -1px -1px 0 #999,
            1px -1px 0 #999,
           -1px 1px 0 #999,
            1px 1px 0 #999;
}

Cela ne fonctionne pas dans ie <10, mais au moins ce n'est pas limité aux navigateurs webkit.