Se hai bisogno per un articolo specifico di avere una lista con Numeri e punti e modificarla in base allo stile del tema ecco u...
Se hai bisogno per un articolo specifico di avere una lista con Numeri e punti e modificarla in base allo stile del tema ecco un esempio e relativa spiegazione di come fare.
Passo 1: Aggiungi il link alla variabile font nel tuo <head>
Aggiungi il seguente link all'interno del tuo tag <head> nel file HTML per caricare le icone di Google Fonts
Esempio codice
Esempio codice per Blogger
Se devi caricare le icone di Google Icons in Blogger puoi usare questo codice:
oppure verificare il codice da includere a questo indirizzo web: https://fonts.google.com/icons
Dove devi inserire questo codice?
Nel lato Admin > Tema > Personalizza (Pulsante arancione) > Modifica HTML > all'interno del tag <head>, io in genere lo metto alla prima della chiusura del tag </head>
Che differenza ha questo codice rispetto a quello sopra?
Se noti bene al posto degli doppi apici " bisogna usare l'apice singolo altrimenti il codice va in errore.
Passo 2: Definisci lo stile per l'icona nel tuo CSS
Aggiungi il seguente codice CSS per impostare le variabili delle icone:
Questo elemento lo puoi inserire nell'HTML della pagina singola senza attribuirlo a tutto il sito, oppure puoi aggiungerlo allo stile del tema se vuoi richiamarlo in più pagine.
Passo 3: Modifica il tuo CSS per le liste
Usa questo codice CSS per aggiungere l'icona come pseudo-elemento ::before.
Passo 4: Aggiorna il tuo HTML
Assicurati che la struttura HTML della tua lista sia corretta. Ecco un esempio di come dovrebbe essere.
Passo 5: Verifica l'integrazione.
Ora puoi visualizzare la tua pagina e vedere l'icona arrow_right applicata agli elementi di secondo livello della tua lista.
Se tutto è stato configurato correttamente, le tue sotto-liste dovrebbero mostrare l'icona arrow_right invece dell'immagine originale.
Se hai bisogno di ulteriori personalizzazioni, puoi aggiungere altre proprietà CSS al pseudo-elemento ::before per adattarlo al tuo design.
Esempio applicazione di Lista con numeri e punti modificata in CSS
-
Testo numerato:
- testo con rientro.
-
Secondo testo numerato:
- Cosa accade se il testo è più lungo è va a capo? Vediamolo in questo esempio inserendo del testo aggiuntivo. Gestendo i parametri a padding-left e text-indent è possibile allineare il testo a piacere.
-
Terzo testo numerato:
- testo con rientro.
-
Quarto testo numerato:
- facciamo un esempio con due sotto punti elenco questo è il primo;
- questo è il secondo.
Nessun commento