À L'Aide De Nombres Avec La Police Impressionnant

Police génial, en réalité, a la prise en charge intégrée pour l'empilement régulier de texte (c'est à dire les chiffres, les lettres, ..) sur le dessus des icônes.

Ici est un bel exemple d'une icône de calendrier avec le jour du mois sous forme de texte brut. Comme le post qui explique aussi vous pouvez avoir besoin de jeter un peu de 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; }

À inclure des lettres et des nombres rendre la feuille de style pour FA trop grande et ils ne le supporte pas ( https://github.com/FortAwesome/Font-Awesome/issues/5019 ). donc ce que je fais, c'est comme tels:

.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>

ce qui laisse une belle propre police de caractères et vous pouvez toujours utiliser la bête que j' ( em ) pour garder trakc des "icônes". En Plus cela permet de maintenir toutes icône de type de caractères à l'intérieur de la même élémentaire portée... (.fa-^)

Je crois que ce fil a été une icône avec un cercle autour d'elle. Si vous modifiez cette CSS ci-dessus pour en faire un <span> au lieu d'un <button> et de créer un élément de type block dans votre portée.

.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>

Pas que je sais de réduction! En fait la Police génial, c'est une police de caractères utilisée pour le rendu des icônes seulement. Voici une liste des icônes Fontawesome icônes.

Vous pourriez le faire dans de nombreuses autres façons je voudrais le faire en utilisant l'un de ces 2 autres méthodes en fonction de ce que vous cherchez. Par exemple...

Un simple cercle avec un nombre à l'intérieur, la façon dont je voudrais aller avec CSS, création d'un cercle et l'utilisation normale du texte à l'intérieur. Il ya des tonnes de posts/exemples dans google pour cela. En voici une : comment créer des cercles avec les css

Si vous souhaitez arriver avec quelque chose de plus graphique/icône je suggère de prendre un coup d'oeil à Fontello, ce qui crée une police de caractères de vos propres fichiers svg. Ainsi, vous pouvez faire vos propres numéros d'images d'arrière-plan et de rendre les nombres comme des icônes comme fontawesome n'.

Ont un bon!

Pancho