Guide et astuce Des icônes tout en CSS pour votre forum

Un site génial pour afficher des icônes grâce à CSS. Il y a une collection de plus de 70 icônes disponibles.
Vous pouvez les afficher soit en utilisant la feuille de style hébergée : <link href="https://css.gg/css?=" rel="stylesheet">

Soit en téléchargeant la feuille de style complète puis en l'hébergeant sur votre propre serveur, ou encore en créant un template .less dans votre ACP et en y recopiant le contenu.

App - CSS Icons

App for css.gg icons with custom selection for all pure CSS icons

css.gg

Au cas par cas vous pouvez copier le code CSS de l'icône désirée dans votre extra.less, par exemple airplane, puis en utilisant dans votre template html <i class="gg-airplane"></i>. Bien pratique je trouve et une bonne alternative au pesant FontAwesome...

Le code est long mais dessiner un avion juste en utilisant du CSS c'est quand même génial !

 .gg-airplane {
 box-sizing: border-box;
 position: relative;
 display: block;
 width: 18px;
 height: 18px;
 transform: scale(var(--ggs,1));
 background:
 linear-gradient(
 to left,
 currentColor 22px,
 transparent 0
 ) no-repeat center/16px 2px,
 radial-gradient(
 circle,
 currentColor 60%,
 transparent 40%
 ) no-repeat right center/2px 2px
}

.gg-airplane::after,
.gg-airplane::before {
 content: "";
 display: block;
 position: absolute;
 box-sizing: border-box;
 width: 10px;
 height: 8px;
 border-right: 4px solid
}

.gg-airplane::before {
 border-top-right-radius: 2px;
 top: 0;
 transform:
 perspective(10px)
 rotateX(10deg)
 skewX(30deg);
 box-shadow: -4px 3px 0 -2px
}

.gg-airplane::after {
 border-bottom-right-radius: 2px;
 bottom: 0;
 transform:
 perspective(10px)
 rotateX(-10deg)
 skewX(-30deg);
 box-shadow: -4px -3px 0 -2px
}

 

[Jack's forum]

Chouette mais il en manque pas mal pour ne se servir que de ce set d'icône.
Il n'y a même pas les U I B d'un simple éditeur de texte... Mais quelques icônes sont bien faites notamment celle d'Adidas.