Ajouter une description d'activité avec icônes : Différence entre versions
| Ligne 17 : | Ligne 17 : | ||
[[Fichier:Capture du 2018-05-29 16-14-31.png|thumb||Le nom de l'icône]] | [[Fichier:Capture du 2018-05-29 16-14-31.png|thumb||Le nom de l'icône]] | ||
| − | Pour l'intégrer dans l'activité, saisir simplement '''le nom de l'icône précédé de "fa-" entre deux crochets''' comme ceci : <nowiki>[fa-users]</nowiki> | + | Pour l'intégrer dans l'activité, saisir simplement '''le nom de l'icône précédé de "fa-" entre deux crochets''' comme ceci : '''<nowiki>[fa-users]</nowiki>''' |
Après avoir enregistré, l'icône apparaît. | Après avoir enregistré, l'icône apparaît. | ||
| − | Remarque : il est possible de changer la couleur <nowiki>[fa-users red]</nowiki> ou la taille <nowiki>[fa-users fa-3x]</nowiki> (voir [https://fontawesome.com/how-to-use/svg-with-js#additional-styling styling]) | + | Remarque : il est possible de changer la couleur '''<nowiki>[fa-users red]</nowiki>''' ou la taille '''<nowiki>[fa-users fa-3x]</nowiki>''' (voir [https://fontawesome.com/how-to-use/svg-with-js#additional-styling styling]) |
Version du 29 mai 2018 à 14:21
Sommaire
Objectifs
Insérer une icône.
Que devez-vous faire ?
- Basculer en mode édition
- Cliquer sur Modifier > Paramètres
Comment devez-vous procéder ?
Pour insérer des icônes dans une description d'activité on peut procéder de la manière suivante.
En premier lieu choisir une icône et repérer son nom dans la bibliothèque Font Awesome.
Pour l'intégrer dans l'activité, saisir simplement le nom de l'icône précédé de "fa-" entre deux crochets comme ceci : [fa-users]
Après avoir enregistré, l'icône apparaît.
Remarque : il est possible de changer la couleur [fa-users red] ou la taille [fa-users fa-3x] (voir styling)
Autre méthode : avec le code HTML
Pour l'intégrer dans l'activité, copier le code proposé. Par exemple :
<i class="fa fa-star" aria-hidden="true"></i>
et dans l'éditeur de texte, passer en mode html en cliquant sur l’icône et coller ce texte à l'endroit souhaité.
Pour aller plus loin :
La page exemples donne du code de personnalisation plus avancé.
