Difference between revisions of "Ajouter une description d'activité avec icônes"

From M@gistère
Jump to navigation Jump to search
Line 22: Line 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'ajouter une balise HTML englobant l'icône. Pour cela, il faut utiliser le mode HTML de l'éditeur :
 
Pour changer la couleur, il est nécessaire d'ajouter une balise HTML englobant l'icône. Pour cela, il faut utiliser le mode HTML de l'éditeur :

Revision as of 13:36, 24 October 2018

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.

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 :

[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]


Un exemple avec deux icônes


Pour changer la couleur, il est nécessaire d'ajouter une balise HTML englobant l'icône. Pour cela, il faut utiliser le mode HTML de l'éditeur :

 <span style="color:#00000">[fa-question-circle fa-pull-left]</span>

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é.