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

From M@gistère
Jump to navigation Jump to search
Line 1: Line 1:
<i class="fa fa-font-awesome fa-lg" aria-hidden="true"></i>
 
Pour insérer des icones dans une description d'activité on peut procéder de la manière suivante.
 
  
En premier lieu choisir l'icône en cliquant dans la bibliothèque [https://fontawesome.com/icons Font Awesome].
+
==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 [https://fontawesome.com/icons?d=gallery&m=free Font Awesome].
 +
 
 +
 
 +
[[Fichier:ajouterFontAwesome01.png|Le nom de l'icône]]
 +
 
 +
 
 +
Pour l'intégrer dans l'activité, saisir simplement ce nom précédé de "fa-" entre deux crochets
 +
 
 +
 
 +
<nowiki>[fa-calendar]</nowiki>
 +
 
 +
Après avoir enregistré, l'icône apparaît.
 +
 
 +
 
 +
 
 +
Méthode HTML
 +
====
  
 
Pour l'intégrer dans l'activité, copier le code proposé. Par exemple :
 
Pour l'intégrer dans l'activité, copier le code proposé. Par exemple :

Revision as of 13:54, 29 May 2018

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.


Le nom de l'icône


Pour l'intégrer dans l'activité, saisir simplement ce nom précédé de "fa-" entre deux crochets


[fa-calendar]

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


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