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 gli snapshot con Azure File shares
Ottimizzazione dei block template in Angular 17
Reactive form tipizzati con modellazione del FormBuilder in Angular
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Utilizzare la libreria Benchmark.NET per misurare le performance
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Migrare una service connection a workload identity federation in Azure DevOps
Usare le collection expression per inizializzare una lista di oggetti in C#
Miglioramenti nell'accessibilità con Angular CDK
Inizializzare i container in Azure Container Apps
Eseguire query verso tipi non mappati in Entity Framework Core
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Paginare i risultati con QuickGrid in Blazor
- Ottimizzazione dei block template in Angular 17