Fontello : l’utiliser avec LESS, industrialisation

Fontello est un outil génial pour généré LA webfont contenant uniquement les caractères dont vous avez besoin => gain de poids énorme.

J’en ai déjà parlé dans mon article « Ajouter LESS à un site Drupal existant » : on sélectionne ses icônes et on télécharge un package contenant la font et le CSS associé généré. C’est très bien pensé car parmi les fichiers CSS, l’un comporte TOUTE la définition de la webfont (fontello.css), alors qu’un autre ne comporte que la définition des icones elles-mêmes (fontello-codes.css).

Vous pouvez donc aisément créé la version LESS comportant la définition de la font, et vous n’aurez plus qu’à ajouter au fur et à mesure les définitions CSS des icônes.

// ---------------------------------------------------
// Fontello, transcrit en LESS
// ---------------------------------------------------
//// copie du fontello.css généré, en insérant des variables pour régler
// le répertoire des fonts et la version du package téléchargé (pour cache).
// @FontelloPathFonts    : répertoire de stockage des fonts
// @FontelloIconsVersion : version (numéro généré) donné dans le package téléchargé (cf fontello.css)
// ---------------------------------------------------
@FontelloPathFonts    : "/sites/all/libraries/fontello/font/";
@FontelloIconsVersion : "80338645";// numéro généré par fontello au téléchargement (cache)

@font-face {
  font-family: 'fontello';
  src: url('@{FontelloPathFonts}fontello.eot?@{FontelloIconsVersion}');
  src: url('@{FontelloPathFonts}fontello.eot?@{FontelloIconsVersion}#iefix') format('embedded-opentype'),
       url('@{FontelloPathFonts}fontello.woff?@{FontelloIconsVersion}') format('woff'),
       url('@{FontelloPathFonts}fontello.ttf?@{FontelloIconsVersion}') format('truetype'),
       url('@{FontelloPathFonts}fontello.svg?@{FontelloIconsVersion}#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icons, // ajouté pour pouvoir insérer le code dans d'autres CSS
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  //width: 1em;
  margin-right: .2em;
  text-align: center;
  // opacity: .8; 

  // For safety - reset parent styles, that can break glyph codes
  font-variant: normal;
  text-transform: none;

  // fix buttons height, for twitter bootstrap 
  line-height: 1em;

  // Animation center compensation - margins should be symmetric 
  // remove if not needed 
  margin-left: .2em;

  // you can be more comfortable with increased icons size 
  // font-size: 120%; 

  // Uncomment for 3D effect 
  // text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);

  -webkit-font-smoothing: antialiased;
}

// -----------------
// Seule cette partie sera à modifier au fur et à mesure des changements d'icones.
// -----------------
// Presque identique au fontello-codes.css, mais on sépare le :before dans un sous-bloc, pour pouvoir
// l'insérer/réutiliser dans une feuille LESS et pas seulement dans un attribut "class".
// Inspiré de la librairie Boostrap.
.icon-plus-squared  { &:before { content: '\e802'; } }
.icon-minus-squared { &:before { content: '\e803'; } }
.icon-search        { &:before { content: '\e804'; } }
.icon-link          { &:before { content: '\e801'; } }

De cette façon, soit vous utilisez vos icones de la manière classique, moins gourmande en code CSS généré :

<div><span class="icon-search"></span> Rechercher</div>

Soit, ponctuellement, vous pouvez également utiliser les définitions LESS dans une autre classe CSS :

// Liens externes
.link-item-icon{
  .icons;
  .icon-link;
}

Attention, car ici, ça « copie » la définition « icons » dans la classe « link-item-icon », c’est pour ça que je dis « ponctuellement ».
C’est vraiment dans le cas où vous êtes coincés pour faire autrement (ajout d’un SPAN).