Gli SVG e l’elogio degli em

Usate gli SVG o le web font per le icone dei vostri siti web?

Io adesso uso gli SVG (potete approfondire il perché con Chris Coyier e il come con Sara Soueidan e Chris Coyier) e, se avete la stessa intenzione, fatevi un favore e usate da subito questo CSS:

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;

  /* così le icone siederanno sulla linea di base */
  vertical-align: text-bottom;
}

è una piccola modifica a quello che fornisce IcoMoon App che, a sua volta, è una lieve miglioria a quello che consiglia Coyier.

La parte più interessante del codice è:

.icon {
  …
  width: 1em;
  height: 1em;
  …
}

La prima volta l'ho visto descritto nel libro di Coyier ed è una soluzione molto elegante al problema di dare una dimensione alle icone SVG: con questo CSS non c'è più bisogno di specificare misure usando numeri magici che, inevitabilmente, varieranno nel corso della vita del sito web peggiorando il compito, già abbastanza ingrato, di mantenere il design consistente.

Se poi c'è proprio bisogno di fare qualche aggiustamento potete lavorare sulle singole icone:

.icon--blog, .icon--twitter {
  padding-right: 1px;
}

Of course, potete vederlo in uso su kaosmos industries.

Matteo Nicoletti

Web design, fotografia, sperimentazioni e altri accidenti. Specialmente altri accidenti.

Firenze, Italia http://kaosmos.it

Subscribe to Web Appreciation Society

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!