Come posso fare in modo che i box callout mostrino automaticamente un'icona (come una lampadina o un punto esclamativo) in base alla tipologia?

Per fare in modo che i box callout mostrino automaticamente un'icona (tramite emoji) in base alla tipologia senza doverla inserire a mano ogni volta nell'HTML, puoi aggiornare il codice CSS sfruttando Flexbox e lo pseudo-elemento ::before.

1.Apri l'editor HTML del tema:Accesso al codice.

Accedi alla dashboard di Blogger, seleziona Tema, clicca sui tre puntini accanto a Personalizza e scegli Modifica HTML.

Verifica: L'editor del codice sorgente del blog risulta aperto.

2.Aggiungi il layout Flexbox e le icone:Aggiornamento CSS.

Sostituisci o aggiorna il blocco CSS dei callout che avevi inserito in precedenza con questo codice ottimizzato. Utilizza display: flex per allineare perfettamente l'icona a sinistra del testo:

CSS

/* Stile base per i riquadri callout con supporto flexbox */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
  border-left: 5px solid #2563eb;
  background-color: var(--card-bg, #f9fafb);
  color: var(--text-color, #374151);
  font-family: inherit;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.callout p {
  margin: 0;
  line-height: 1.6;
}

/* Definizione delle icone automatiche in base alla classe */
.callout-info::before { content: "ℹ️"; }
.callout-warning::before { content: "⚠️"; }
.callout-success::before { content: ""; }
.callout-danger::before { content: ""; }

/* Proprietà comuni per l'icona generata */
.callout::before {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
}

/* Varianti di colore per le diverse tipologie */
.callout-info {
  border-left-color: #2563eb; /* Blu */
  background-color: rgba(37, 99, 235, 0.04);
}

.callout-warning {
  border-left-color: #d97706; /* Arancione / Attenzione */
  background-color: rgba(217, 119, 6, 0.04);
}

.callout-success {
  border-left-color: #16a34a; /* Verde / Consiglio */
  background-color: rgba(22, 163, 74, 0.04);
}

.callout-danger {
  border-left-color: #dc2626; /* Rosso / Pericolo */
  background-color: rgba(220, 38, 38, 0.04);
}

Verifica: Il codice CSS viene inserito correttamente senza errori di sintassi.

3.Salva e verifica sul blog:Salvataggio e Test.

Clicca sull'icona del dischetto in basso a destra per salvare le modifiche. Ora, ogni volta che userai un tag come <div class="callout callout-warning">, l'icona di attenzione (⚠️) comparirà automaticamente all'inizio del box senza bisogno di scriverla nel testo dell'articolo.

Verifica: Aprendo un post di prova, i box mostrano l'icona corretta allineata in modo impeccabile con il testo.