Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)
Le deal à ne pas rater :
ASOS : -20% en plus sur les articles soldés
Voir le deal

Aller en bas
Miettes
Miettes
Râleuse (Admin)
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2159

Utiliser des icônes de Material-Design Empty Utiliser des icônes de Material-Design

le Lun 10 Fév 2020 - 14:55

Astuce

Utiliser des icônes de Material-Design

Hello Smile

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 Smile

Materiel-Design, qu'est-ce que c'est ?

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 .

Un exemple pour commencer

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>

Comment ça marche ?

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

Appeler la CSS

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">

Sur une page HTML

On l'appellera juste avant la balise fermante
Code:
</head>

Sur le forum

On l'ajoutera juste avant la balise fermante
Code:
</head>
Dans le template overall_header.

Dans un message

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>

Utiliser Material Icon dans le HTML

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:
Utiliser des icônes de Material-Design Materi10

Ensuite, il te suffit de sélectionner et de copier ce qui se trouve dans "usage".
Spoiler:
Utiliser des icônes de Material-Design Materi11

Puis, de le coller à l'endroit voulu Smile

Utiliser Material Icon dans la CSS

Ici, c'est un chouilla plus compliqué Smile 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:
Utiliser des icônes de Material-Design Materi12
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 :
Utiliser des icônes de Material-Design Materi13
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 :
Utiliser des icônes de Material-Design Materi14




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



_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses