web-dev-qa-db-fra.com

Utiliser des nombres avec une police géniale

Je veux utiliser des nombres pour lister les étapes d'un processus. J'étais curieux de savoir comment faire cela avec Font Awesome.

J'aimerais utiliser des cercles avec 1, 2, 3 ... dedans. Est-ce possible?
Font Awesome ajoutera-t-il des chiffres à la liste des icônes?

Merci!

htmlcssfont-awesome
40
rschonhoff

La police géniale a réellement support intégré pour empiler le texte normal (c.-à-d. Les nombres, les lettres, ..) au-dessus des icônes.

Voici un bel exemple d’icône de calendrier avec le jour du mois en clair. Comme l'explique également le message, vous devrez peut-être ajouter un style supplémentaire pour un positionnement optimal.

HTML: 

<span class="fa-stack fa-3x">
  <i class="fa fa-calendar-o fa-stack-2x"></i>
  <strong class="fa-stack-1x calendar-text">27</strong>
</span>

CSS: 

.calendar-text { margin-top: .3em; }
42
Lennart Stoop

Le code suivant donnera un cercle avec un nombre

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

Le code suivant donnera un cercle plein avec un nombre

<span class="fa-stack fa-3x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <strong class="fa-stack-1x text-primary">1</strong>
</span>

Ici le text-primary class (à partir de bootstrap) est utilisé pour définir la couleur du numéro

32
Sagar Ranglani

Si vous incluez des lettres et des chiffres, la feuille de style de FA sera trop volumineuse et ne la supportera pas ( https://github.com/FortAwesome/Font-Awesome/issues/5019 ). donc ce que je fais est comme tel:

.fa-alph {
font-family: Arial, sans-serif; /* your font family here! */
font-weight: bold;
color: #860000;
font-style: normal;   
}

puis

<button class="btn btn-default" type="button"><i class="fa-alph">2</i></button>

cela laisse une police propre et agréable et vous pouvez toujours utiliser le stupide i (em) pour garder trace des "icônes". De plus, tous les caractères de type icône sont conservés dans la même portée élémentaire ... (.fa- ^)

Je crois que ce fil était pour une icône entourée d'un cercle. Donc, vous voudriez modifier ce CSS ci-dessus pour en faire un <span> au lieu d'une <button> et créez un élément de bloc dans votre étendue.

.f-circle {
font-family: Arial; /* your font family here! */
font-weight: bold;
display: block;
border: 1px solid #860000;
border-radius: 999px;
padding: 6px 12px;
}

puis

<span class="f-circle"><i class="fa-alph">2</i></span>
2
tradesouthwest

Vous pouvez simplement faire quelque chose comme ceci à la place:

<i class="fa fa-star" aria-hidden="true"> 1</i>
<i class="fa fa-star" aria-hidden="true"> 2</i> 
<i class="fa fa-star" aria-hidden="true"> 3</i> 
...
1
Jerome Blacq

Je trouve que cela fonctionne bien dans WordPress (après l’ajout du styesheet CDN à l’en-tête)):

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa-stack-1x fa-inverse">1</i>
</span>
0
TheHackRepairGuy

Pas que je sache! En fait, Police awesome est une police utilisée pour afficher uniquement les icônes. Voici une liste d'icônes possibles Fontawesome-icons .

Vous pouvez le faire de nombreuses autres manières. Je le ferais en utilisant l’une de ces 2 autres méthodes en fonction de ce que vous recherchez. Par exemple...

Un simple cercle avec un nombre à l'intérieur, comme je le ferais avec CSS, créer un cercle et utiliser du texte normal à l'intérieur. Il y a des tonnes de messages/exemples dans Google pour cela. En voici un: comment créer des cercles avec css

Si vous voulez y parvenir avec quelque chose de plus graphique/icône, je vous suggère de jeter un oeil à Fontello , cela crée une police à partir de vos propres fichiers svg. Vous pouvez donc créer vos propres nombres avec des images en arrière-plan et les rendre sous forme d'icônes, à la manière de fontawesome.

Avoir un bon!

Pancho

0
Pancho