Voir la source de Ajouter une description d'activité avec icônes

<!--DébutCommentaire.
Aide: si nécessaire, ajoutez ci-dessous une des balises suivantes :
[[Catégorie:Amodifier]] [[Catégorie:Asupprimer]] [[Catégorie:Encours]] [[Catégorie:Arelire]] 
FinCommentaire-->

{{Version| [[version::3.0.4]]}}

==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 [https://fontawesome.com/v4.7.0/icons/ Font Awesome].

[[Fichier:Capture du 2018-05-29 16-14-31.png|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 crochets''' comme ceci : 

'''<nowiki>[fa-question-circle]</nowiki>'''

Après avoir enregistré, l'icône apparaît.

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>'''
* aligner à gauche avec habillage du texte '''<nowiki>[fa-question-circle fa-pull-left]</nowiki>'''


[[Fichier:Capture du 2018-05-29 16-08-10.png|Un exemple avec deux icônes]]


Pour changer la couleur, l'éditeur Atto propose une liste de nuances compatibles avec la charte graphique de m@gistère.

[[Fichier:Couleurs atto.png|Couleurs disponibles pour mettre en page le texte avec l’éditeur Atto]]



==Autre méthode : avec le code HTML==

Pour l'intégrer dans l'activité, copier le code proposé. Par exemple :

<nowiki><i class="fa fa-star" aria-hidden="true"></i></nowiki>

et dans l'éditeur de texte, passer en mode html en cliquant sur l’icône <i class="fa fa-code fa-lg" aria-hidden="true"></i>et coller ce texte à l'endroit souhaité.

'''
Pour aller plus loin :'''

La page [http://fontawesome.io/examples/ exemples] donne du code de personnalisation plus avancé.