css - family - font awesome size

¿Cómo puedo superponer un número encima de un glifo de FontAwesome?

Question

¿Cómo puedo superponer un número entre 0 y 99 en medio de ''icon-star-empty''?

Answer 1

Esto es lo que uso para las superposiciones de contadores (insignias) con FontAwesome (FA) 5.1. A diferencia del uso del nuevo método fa-layers , esto no requiere SVG + JS. Simplemente agregue un atributo de data-count <i> ...

CSS

.fas[data-count]{
    position:relative;
}
.fas[data-count]:after{
    position: absolute;
    right: -0.75em;
    top: -.75em;
    content: attr(data-count);
    padding: .5em;
    border-radius: 10em;
    line-height: .9em;
    color: white;
    background: rgba(255,0,0,.75);
    text-align: center;
    min-width: 2em;
    font: bold .4em sans-serif;
}

Margen

<i class="fas fa-envelope" data-count="8"></i> &nbsp;
<i class="fas fa-address-book fa-lg" data-count="16"></i> &nbsp;
<i class="fas fa-bookmark fa-2x" data-count="4"></i> &nbsp;
<i class="fas fa-angry fa-3x" data-count="32"></i> &nbsp;
<i class="fas fa-bell fa-4x" data-count="2"></i>

Ejemplo

Conclusión

Algunos tamaños de iconos de FA pueden requerir ajustes de posición / tamaño de distintivo, pero funcionan bien para mis propósitos. Todos los colores / posiciones se pueden ajustar para las superposiciones de calendario, las etiquetas de texto o el contorno de estrella de OP.

Nota

No probado, pero usar el mismo CSS debería funcionar con versiones anteriores de FA cambiando la clase fas a fa lugar.

Answer 2

Esto también se puede hacer usando Font Awesome Layers usando la versión 5.0

<div class="fa-4x">
  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-circle" style="color:Tomato"></i>
    <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-bookmark"></i>
    <i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
    <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
    <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
    <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-calendar"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-certificate"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-envelope"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
  </span>
</div>

Answer 3

Simplemente haga esto desde los documentos de Font Awesome en los iconos apilados :

<span class="fa-stack fa-lg">
    <i class="fa fa-star-o fa-stack-2x"></i>
    <i class="fa fa-stack-1x">1</i>
</span>

Answer 4

Tu css debería verse algo como:

.contain-i-e-s,.icon-empty-star,.text-i-e-s{
  height:100px; width:100px;
}
.contain-i-e-s{
  position:relative;
}
.text-i-e-s{
  text-align:center; position:absolute;
}

Su HTML podría verse como:

<div class=''contain-i-e-s''>
  <i class=''icon-empty-star''></i>
  <div class=''text-i-e-s''>99</div>
</div>