web-dev-qa-db-fra.com

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

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

heavy remove icon, next to lightweight font:

Moche, non? J'ai donc essayé de réinitialiser le poids de police comme suit:

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

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

Est-il possible de rendre l'icône moins lourde? Les docs disent " Tout ce que vous pouvez faire avec les styles de police CSS, vous pouvez le faire avec Font Awesome " mais je ne peux pas comprendre comment faire cela.

csstwitter-bootstrapfont-awesome
69
Richard

Mise à jour 2018

La police Awesome 5 propose désormais light, normal et solide variantes. L'icône présentée dans cette question a le style suivant sous les différentes variantes:

fa-times variants

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

La documentation de Comment utiliser de Font Awesome explique comment utiliser ces variantes.

Réponse originale

Font Awesome utilise la région à usage privé de Unicode . Par exemple, cette .icon-remove que vous utilisez est ajouté en utilisant le ::before pseudo-sélecteur, définissant son contenu sur\f00d ():

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

Font Awesome est fourni avec une seule variante, mais les navigateurs le rendent comme ils le feraient pour toute police avec une seule variante. Si vous regardez de plus près, le normal police-weight n'est pas aussi gras que le bold police-weight. Malheureusement, un poids de police normal n'est pas ce que vous recherchez.

Ce que vous pouvez cependant faire, c’est changer sa couleur en quelque chose de moins sombre et réduire la taille de la police pour la faire ressortir un peu moins. À partir de votre image, le texte "tags" apparaît beaucoup plus clair que l'icône. Nous vous conseillons donc d'utiliser quelque chose comme:

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

Voici un exemple de JSFiddle , et ici est une preuve supplémentaire qu'il s'agit bien d'une police.

51
James Donnelly

Les navigateurs Webkit prennent en charge la possibilité d’ajouter des "traits" aux polices. Ce peu de style rend les polices plus minces (en supposant un fond blanc):

-webkit-text-stroke: 2px white;

Exemple sur codepen ici: http://codepen.io/mackdoyle/pen/yrgEH Certaines personnes utilisent SVG pour une solution multi-plateforme "AVC": http: // codepen. io/CrocoDillon/pen/dGIsK

90
user3303554

Juste pour aider ceux qui viennent sur cette page. C'est une alternative si vous êtes flexible avec l'utilisation d'une autre bibliothèque d'icônes.

James a raison de dire que vous ne pouvez pas modifier le poids de la police. Toutefois, si vous recherchez une apparence plus moderne pour les icônes, vous pouvez envisager ionicons

Il a à la fois ios et Android versions pour les icônes.

27
Abhi

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

7
Matthew Steeples

Une autre solution que j'ai utilisée pour créer des icônes de fontawesome plus légères, similaires au webkit-text-stroke _ mais plus portable, l’approche consiste à définir la couleur de l’icône de la même manière que l’arrière-plan (ou transparent) 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 <10, mais au moins, cela ne se limite pas aux navigateurs Webkit.

5
MBrizzle