Ajouter une description d'activité avec icônes : Différence entre versions

De M@gistère
Sauter à la navigation Sauter à la recherche
Ligne 1 : Ligne 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 :

Version du 29 mai 2018 à 13:54

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