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

From M@gistère
Jump to navigation Jump to search
(Page créée avec « Pour insérer des icones dans une description d'activités on peut procéder de la manière suivante. En premier lieu choisissez l'icône en cliquant dans la bibliothèqu... »)
 
 
(29 intermediate revisions by 4 users not shown)
Line 1: Line 1:
Pour insérer des icones dans une description d'activités on peut procéder de la manière suivante.
+
<!--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-->
  
En premier lieu choisissez l'icône en cliquant dans la bibliothèque[https://fontawesome.com/icons Font Awesome].
+
{{Version| [[version::3.0.4]]}}
  
Pour l'intégrer dans votre activité copiez le code proposé. Par exemple :
+
==Que devez-vous faire ?==
  
<i class="fa fa-star" aria-hidden="true"></i>
+
Basculer en mode édition et accéder au formulaire de modification de l'élément.
  
et dans l'éditeur de texte, passer en mode html en cliquant sur l’icône <> et collez ce texte à l'endroit souhaité.
+
==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é.
 
La page [http://fontawesome.io/examples/ exemples] donne du code de personnalisation plus avancé.

Latest revision as of 09:59, 7 January 2020


Version m@gistère : 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 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, l'éditeur Atto propose une liste de nuances compatibles avec la charte graphique de m@gistère.

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 :

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