Come posso sovrapporre un numero compreso tra 0 e 99 nel mezzo di 'icon-star-empty'?Come posso sovrapporre un numero sopra un glifo FontAwesome?
risposta
È CSS dovrebbe essere simile:
.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;
}
tuo HTML potrebbe essere simile:
<div class='contain-i-e-s'>
<i class='icon-empty-star'></i>
<div class='text-i-e-s'>99</div>
</div>
semplicemente fare questo dal Font Awesome docs on Stacked Icons:
<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>
Questo è il modo fantastico per fare questo; quindi, il modo preferito. Vedi l'__stacked icon__ esempi [qui] (http://fortawesome.github.io/Font-Awesome/examples/). – Tsiege
Vedere http://jsfiddle.net/tagliala/SNVRp/ per un esempio che funzioni per font-awesome 3.2.1 – Carlton
Vedere http://jsfiddle.net/d1njqc42/2/ per un violino 4.4.0. – Necreaux
Questo può anche essere fatto utilizzando Font Awesome Layers utilizzando la versione 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>
- 1. Come posso sovrapporre un testo a un altro usando CSS?
- 2. Come posso sovrapporre un SKScene a un SCNScene in Swift?
- 3. Come posso sovrapporre un controllo su una finestra?
- 4. Come unire due icone insieme? (Sovrapporre un'icona sopra l'altro)
- 5. Qual è il glifo numero 11?
- 6. come stilizzare un cerchio Fontawesome icona sfondo?
- 7. Come posso sovrapporre immagini (png) all'interno di un sito web?
- 8. Come sovrapporre un Jbutton a una JprogressBar
- 9. Sovrapporre una tela su un div
- 10. Esiste un carattere "glifo non trovato"?
- 11. OpenGLRenderer, trovato un glifo non valido
- 12. Come sovrapporre, ridimensionare e centrare un componente su un JPanel?
- 13. Come posso sovrapporre due grafici in Seaborn?
- 14. Scorrere un UIView per sovrapporre parzialmente un altro UIView
- 15. Come posso sovrapporre un file audio a un altro e salvarlo?
- 16. Come posso aggiungere una barra di ricerca sopra un UICollectionView?
- 17. Come posso sovrapporre un'ombra esterna a una ScrollView?
- 18. Fontforge Scripting come aggiungere legature per un glifo
- 19. Come rendere glifi da FontAwesome su un elemento Canvas
- 20. Come posso arrotondare un numero in Javascript?
- 21. Come posso ottenere il glifo impostato manualmente per un determinato carattere?
- 22. Come inserire un punto interrogativo sopra \ leq?
- 23. Come posso sovrapporre un pulsante "indietro" e "successivo" in una finestra "scegli rete wifi"?
- 24. Testo principale - Altezza del glifo
- 25. Come viene mappato un carattere Unicode in un glifo in un font?
- 26. Puoi sovrapporre un div trasparente a un'immagine
- 27. Come posso verificare se un valore è un numero?
- 28. Come posso dichiarare un PropType corrispondente a un numero nullable?
- 29. In Kotlin Come posso convertire un Int? a un numero
- 30. Come sovrapporre un cerchio su una mappa iOS
Grazie. Non sono sicuro del motivo per cui questa è stata la risposta accettata. Ho appena dato una risposta CSS, non capendo completamente Font Awesome al momento. In realtà ho votato l'altro ragazzo. – PHPglue