L'uso delle glyph consete di aggiungere facilmente immagini vettoriali alle applicazioni, agendo su colori e dimensioni senza necessità di creare nuovamente gli asset.
Se si opta per una library come FontAwesome, sono già inclusi una serie di effetti da applicare, mentre per i glyph di Bootstrap questo non è vero.
Grazie alle animazioni di CSS3, è sufficiente aggiungere questo stile per avere il supporto per la rotazione:
.glyphicon-spin { -webkit-animation: spin 1000ms infinite linear; -moz-animation: spin 1000ms infinite linear; -o-animation: spin 1000ms infinite linear; animation: spin 1000ms infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-moz-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
Il principio su cui si basa questo codice è semplice: viene ruotato l'elemento, agendo sulla trasformazione. Questo effetto si applica a glyph che siano centrati e funziona con tutti i browser:
<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare Azure AI Studio per testare i modelli AI
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Installare le Web App site extension tramite una pipeline di Azure DevOps
Sfruttare lo streaming di una chiamata Http da Blazor
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Creare un'applicazione React e configurare Tailwind CSS
Short-circuiting della Pipeline in ASP.NET Core
Code scanning e advanced security con Azure DevOps
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Definire stili a livello di libreria in Angular
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Eseguire query verso tipi non mappati in Entity Framework Core