Utiliser des icônes de Material-Design

Hello

En préparant les tutoriels sur les templates, je me suis rendue compte que sur la version AwesomeBB, ce ne sont pas des icones Fontawesome qui sont utilisées mais des icones Materiel-Design. Du coup, il me paraissait important de vous faire une petite explication à ce sujet


Materiel-Design est un site d'élements "open-source" (c'est-à-dire gratuit) qui te permet d'utiliser pas mal de petites choses "toutes prêtes" pour ton site, comme par exemple des thèmes, des animations, des boutons, ...

Mais ici, nous n'allons nous intéresser qu'aux icônes.


Avant d'entrer dans le vif du sujet, voici ce que tu peux faire avec les Material-icons :

favorite
watch
subdirectory_arrow_right

Code:

<i class="material-icons">favorite</i>
<i class="material-icons">watch</i>
<i class="material-icons">subdirectory_arrow_right</i>

• Item 1
• Item 2
• Item 3

Code:

<style>.liste-miettes{list-style: none !important;}.liste-miettes li:before{content: 'spa'; display:inline-block; font-family: 'Material Icons'; margin-right: 5px;}</style><!--
--><ul class="liste-miettes"><!--
  --><li>Item 1</li><!--
  --><li>Item 2</li><!--
  --><li>Item 3</li><!--
--></ul>

Nous allons donc avoir comme référence le site de Material Design pour les icônes.


On va commencer par appeler la CSS de la typographie en utilisant ce code :

Code:

<!-- Icons Material Design -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

On l'appellera juste avant la balise fermante

Code:

</head>

On l'ajoutera juste avant la balise fermante

Code:

</head>

Dans le template overall_header.


Eh bien on l'ajoutera directement au début du message.

Code:

<!-- Icons Material Design --><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>
<i class="material-icons">watch</i>
<i class="material-icons">subdirectory_arrow_right</i>

Ici, tu vas voir, c'est super simple. Dès que tu as choisi l'icône qui te plait, il te suffit de cliquer dessus et de cliquer sur "Selected Icon" en bas à gauche. Un bloc de ce type va s'ouvrir :

Spoiler:

Ensuite, il te suffit de sélectionner et de copier ce qui se trouve dans "usage".

Spoiler:

Puis, de le coller à l'endroit voulu


Ici, c'est un chouilla plus compliqué Pour pouvoir utiliser ça en CSS, par exemple dans des listes, on va devoir utiliser les pseudo-éléments :after ou :before.
On va donc avoir quelque chose de ce type :

Code:

.span-miettes-materialicons:before{

}

Ensuite, il va falloir mettre ce sélecteur en display inline-block et lui ajouter le "content" (= l'icône qu'il contiendra). Pour récupérer ce content, il suffit de copier/coller le nom de l'icone :

Spoiler:

On aura donc ce code CSS pour cet exemple :

Code:

.span-miettes-materialicons:before{
  content: 'star';
  display:inline-block;
}

Si on s'arrête là, on a ce rendu :

Le nom de l'icône est collé à mon texte. Le navigateur ne sait pas que "star" est le nom d'une icône. En effet, chacune d'elle fait partie d'une typographie qui permettra au navigateur de "transformer" un nom en image. Du coup, il nous suffit d'ajouter cette typographie à notre CSS :

Code:

.span-miettes-fontawesome:before{
  content: 'star';
  display:inline-block;
  font-family: 'Material Icons';
}

Et là, ça devrait fonctionner :

---

Voilà, tu sais à présent comment ajouter de chouettes icônes à tes pages web En cas de souci, n'hésite surtout pas à te manifester à la suite de ce message.