Esempio di Lista con numeri e punti modificata in CSS

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, se lo aggiunti al tema grafico attenzione che la modifica sarà per tutto il sito.

Esempio codice

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Esempio codice per Blogger

Se devi caricare le icone di
Google Icons
in Blogger puoi usare questo codice:

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' />

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:

</p> <style>.material-symbols-outlined {font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;font-family: 'Material Symbols Outlined';} </style> <p>

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
questo esempio di codice è se vuoi includere questo stile solo in un singolo post di Blogger.

<head> <link href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' rel='stylesheet'/> </head></p> <style> .material-symbols-outlined {<br /> font-variation-settings:<br /> 'FILL' 0,<br /> 'wght' 400,<br /> 'GRAD' 0,<br /> 'opsz' 24;<br /> font-family: 'Material Symbols Outlined';<br /> }</p> <p>.post-body li > ul > li {<br /> list-style-type: none;<br /> position: relative;<br /> padding-left: 50px!important; /* Aumentato per dare più spazio all'icona */<br /> margin-top: 8px!important;<br /> margin-bottom: 8px!important;<br /> }</p> <p>.post-body li > ul > li::before {<br /> content: 'arrow_right';<br /> font-family: 'Material Symbols Outlined';<br /> font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;<br /> position: absolute;<br /> left: 18px; /* Imposta la posizione a 18px da sinistra */<br /> top: 0;<br /> font-size: 24px;<br /> color: #aaaaaa; /* Cambia questo colore se necessario */<br /> }

Passo 4: Aggiorna il tuo HTML

Assicurati che la struttura HTML della tua lista sia corretta. Ecco un esempio
di come dovrebbe essere.

</p> <ul> <li>Elemento principale <ul> <li>Sottoelemento 1</li> <li>Sottoelemento 2</li> <li>Sottoelemento 3</li> </ul> </li> <li>Altro elemento principale</li> </ul> <p>

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

1. Testo numerato:
   • testo con rientro.
2. 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.
3. Terzo testo numerato:
   • testo con rientro.
4. Quarto testo numerato:
   • facciamo un esempio con due sotto punti elenco questo è il primo;
   • questo è il secondo.