web-dev-qa-db-fra.com

Voulez-vous faire des icônes de police génial plus mince

Je travaillais avec des icônes de police géniales mais le problème est qu’elles ont le poids de police par défaut. Je le veux un peu plus mince. mais ça ne marche pas

mon code html

    <span class="fa-stack fa-lg fa-5x color-red">
    <i class="fa fa-circle-thin fa-stack-2x"></i>
    <i class="fa fa-trophy"></i>
    </span>

mon code css

    .fa-trophy{
      font-weight:lighter;
     }
htmlcsstwitter-bootstrapfont-awesome
15
Daniel

Désolé, il n’est pas possible de le faire en utilisant des normes (si ce n’est pas important dans votre projet, vous pouvez utiliser la suggestion de Kiryl Ply). Font-Awesome est fourni avec une seule variante. Il y a un nouveau projet pour résoudre ce problème (pas encore prêt):

https://www.kickstarter.com/projects/232193852/font-awesome-black-tie

vous pouvez chercher une autre bibliothèque un peu plus fine, essayez "icon font" dans Google.

9
kurroman

Vous pouvez le réparer dans webkit avec:

-webkit-text-stroke: 1px background-color;
19
Kiryl Plyaskevicz

essayer avec ça

  .class-name i{
        -webkit-text-stroke: 2px white;
    }
7
Milan Panigrahi

Je sais que c'est une vieille question, mais j'espère que ma réponse pourra aider quelqu'un qui souhaite un cercle plus fin lorsqu'il empile deux superbes icônes de police. J'ai passé beaucoup de temps et d'énergie avant de tomber sur cet article qui m'a aidé dans la bonne direction. Ma solution:

<span class="fa-stack fa-3x">
   <i class="fa fa-circle fa-stack-2x icon-circle"></i>
   <i class="fa fa-leaf fa-stack-1x"></i>
</span>

.icon-circle{
color: transparent !important;
border: 5px solid #YourColor;
border-radius: 50%;}

Lorsque je nettoie mon code, je peux probablement supprimer la balise! Important, mais voici à quoi ressemble mon code 5 minutes après avoir trouvé ma solution. J'espère que cela peut aider quelqu'un et il est agréable de redonner après toute l'aide que j'ai reçue d'autres personnes sur ce forum. 

0
Preben Hesvik