Ajouter une description d'activité avec icônes : Différence entre versions
(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 révisions intermédiaires par 4 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
| − | + | <!--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. | |
| − | et dans l'éditeur de texte, passer en mode html en cliquant sur l’icône <> et | + | ==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é. | ||
Version actuelle datée du 7 janvier 2020 à 09:59
| 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.
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]
Pour changer la couleur, l'éditeur Atto propose une liste de nuances compatibles avec la charte graphique de m@gistère.
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é.
