webdesign css bootstrap optimization imagemagick

Generare un'immagine sprite di favicon

Gli sprites CSS sono un modo per combinare insieme delle immagini al fine di ottimizzare il caricamento della pagina riducendo il numero di richieste HTTP al server.

Un ottimo esempio è l'immagine con le glyphicons usate da boostrap, che si possono vedere in questo sito. L'immagine è questa:

Glyphicons

Ho voluto creare dei link con ai miei account sparsi nel web, utilizzando come icona la favicon del sito. Avrei anche potuto usare direttamente la favicon, scaricandola dal sito esterno. Questa tecnica ha alcuni svantaggi:

  • vengono scaricate in momenti diversi, creando un brutto effetto "apparizione disordinata"
  • fanno riferimento ad un sito esterno, che potrebbe essere irraggiungibile e quindi non funzionare
  • sono file .ico quindi hanno alcuni problemi di visualizzazione

Così alla fine ho preferito creare una css sprite, come usa Bootstrap per le sue icone. Ho mantenuto la stessa dimensione di quelle (14x14) per riutilizzareil più possibile del css originale. Alla fine ho creato uno script per generare automaticamente sia l'immagine che il css.

È possibile scaricare lo script da github: https://github.com/alepez/faviconsprite

Il risultato finale sono due file:

Favicon Sprite

[class^=icon-fav],[class*= icon-fav] { background-image: url(../img/faviconsprite.gif); }
.icon-fav-twitter_com { background-position: 0px 0px; }
.icon-fav-facebook_com { background-position: -14px 0px; }
.icon-fav-stackoverflow_com { background-position: -28px 0px; }
.icon-fav-plus_google_com { background-position: -42px 0px; }
.icon-fav-github_com { background-position: 0px -14px; }
.icon-fav-flickr_com { background-position: -14px -14px; }
.icon-fav-linkedin_com { background-position: -28px -14px; }

È bastato mettere faviconsprite.gif nella cartella /img del sito (dove ci sono gli assets di bootstrap e aggiungere il css a /css/main.css. Quindi quando si mette un link che ha bisogno dell'iconcina, si aggiunge la class icon-fav-dominio_com dove l'underscore sostituisce il punto.

<li>
  <a href="http://twitter.com/alepezzato">
    <i class="icon-fav-twitter_com"></i> twitter
  </a>
</li>  

Font Awesome

Il css generato non è compatibile con Font Awesome. Infatti, dopo essere passato a Font Awesome per le icone di Twitter Bootstrap, ho dovuto fare alcune modifiche.

Ho aggiunto questo al file main.css

[class^=fav],[class*= fav],[class^=fav]:hover,[class*= fav]:hover {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url(../img/faviconsprite.gif);
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

E rinominato tutte le classi icon-fav- in fav-.

Ti è piaciuto l'articolo? Condividilo! Commentalo!

comments powered by Disqus