Ajouter une description d'activité avec icônes : Différence entre versions
| Ligne 17 : | Ligne 17 : | ||
Remarque : il est possible d'ajouter des [https://fontawesome.com/how-to-use/svg-with-js#additional-styling styles] : | Remarque : il est possible d'ajouter des [https://fontawesome.com/how-to-use/svg-with-js#additional-styling styles] : | ||
| − | |||
* changer la taille '''<nowiki>[fa-question-circle fa-3x]</nowiki>''' | * changer la taille '''<nowiki>[fa-question-circle fa-3x]</nowiki>''' | ||
* aligner à gauche avec habillage du texte '''<nowiki>[fa-question-circle fa-pull-left]</nowiki>''' | * aligner à gauche avec habillage du texte '''<nowiki>[fa-question-circle fa-pull-left]</nowiki>''' | ||
| Ligne 23 : | Ligne 22 : | ||
[[Fichier:Capture du 2018-05-29 16-08-10.png|Un exemple avec deux icônes]] | [[Fichier:Capture du 2018-05-29 16-08-10.png|Un exemple avec deux icônes]] | ||
| + | |||
| + | Pour changer la couleur, il est nécessaire d'utiliser le code HTML suivant : | ||
| + | |||
| + | <span style="color:#00000">[fa-question-circle fa-pull-left]</span> | ||
==Autre méthode : avec le code HTML== | ==Autre méthode : avec le code HTML== | ||
Version du 24 octobre 2018 à 13:32
Que devez-vous faire ?
Basculer en mode édition et accéder au formulaire de modification de l'élément.
Comment devez-vous procéder ?
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 crochets comme ceci :
[fa-question-circle]
Après avoir enregistré, l'icône apparaît.
Remarque : il est possible d'ajouter des styles :
- changer la taille [fa-question-circle fa-3x]
- aligner à gauche avec habillage du texte [fa-question-circle fa-pull-left]
Pour changer la couleur, il est nécessaire d'utiliser le code HTML suivant :
[fa-question-circle fa-pull-left]
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é.
