Étiquette : icon

[CSS] Utiliser la propriété « transform: rotate(); » pour faire pivoter les icônes d’une police d’icônes

IMPORTANT: l’icône ne pivotera que si la propriété CSS display: inline-block; lui est appliquée!

IMPORTANT #2: appliquer la transformation sur la classe de l’élément ciblé et pas sur la pseudo-classe :before utilisée par les polices d’icônes.

[Gulp] Génération d’une police d’icônes avec template en SASS

Attention : préférer les sources hébergées sur github.com à celles présentes dans les codebits du tutoriel.

template sass

Par rapport au tutoriel et aux sources du plug-in sur github.com, notez la présence d’un mixin init-icon-font.

gulpfile.js

Utilisation dans des sources SASS :

(bonus) Markup HTML planche d’icônes

How to generate an iconfont styleguide with Gulp

Source: How to generate html page with elements from scss in Gulp
sur Stack Overflow

Here is an example using the jade templating engine. This will read the file ./test.scss, extract all the icon-* words and generate a ./template.html file:

Gulpfile.js:

./test.scss:

./template.jade

The icons variable comes from the {locals: {icons: {}} argument in the .pipe(jade(data)) call.