SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 93 visiteurs en ce moment

Accueil > Rédaction > Assistants de rédaction > Picto avec FontAwesome > Picto avec FontAwesome

Picto avec FontAwesome

9 février 2018 – par Mikha – commentaires

22 votes

Ce plug-in permet d’inclure les pictogrammes proposés par FontAwesome (v. 4.7 ici) dans les articles SPIP.

FontAwesome 4.7

FontAwesome 4.7 est une police de caractère intégrable dans tout site web. Elle met à disposition plusieurs centaines d’icones très variées. Un exemple est donné ci-dessous :

La liste complète est consultable ici :
https://fontawesome.com/v4.7.0/icons/

Modèle

L’utilisation dans SPIP repose sur un modèle unique appelé « picto ». Il peut être inséré grâce au plug-in « inserer modele » : il s’ajoute dans la barre de rédaction sous la forme d’un drapeau noir :

Ensuite laissez vous guider par l’assistant.

Si vous voulez insérer le modèle « à la main », voici ses paramètres :
-  « nom » (le seul qui soit obligatoire) : le nom du picto : la liste des pictogrammes et leur nom est disponible sur le site de fontawesome. L’utilisation la plus simple que l’on puisse faire de ce modèle est donc du type :


-  « theme » : un des 5 thèmes d’habillage du picto : cerclePlein, cercleVide, carrePlein, carreVide, danger. Par exemple :

Voici ce que donne chaque theme :

-  « taille » : la taille du picto : 1x 1.3x 2x 3x 4x ou 5x (taille relative à la taille de la police en cours d’utilisation)
-  « largeurFixe » : oui ou non. si la largeur du picto est fixe ou pas. (= utilisation en police à espacement non proportionnel)
-  « negatif » : oui ou non. picto en blanc
-  « bordure » : oui ou non. ajoute une bordure autour du picto
-  « aligner » : gauche ou droite.
-  « rotation » : gauche, droite ou bas. Affiche le picto tourné de 90° à gauche, à droite, ou « la tête en bas ».
-  « symetrie » : affiche le picto en symétrie horizontale ou verticale.
-  « animation » : continu ou etapes. Fait tourner sur lui même au cours du temps, en continu ou sacadé sur 8 étapes. Utile en particulier avec les icones circle-o-notch, cog, gear, refresh ou spinner. (voir ici).
-  « class » : nom d’une classe CSS à appliquer au picto
-  « titre » : un titre à afficher à côté du picto
-  « classTitre » : classe CSS pour le titre du picto

Bien sûr le modèle est utilisable dans les squelettes eux-mêmes avec #MODELE avec les mêmes paramètres.

Goodies

L’insertion du plug-in provoque le remplacement des flèches triangulaires des listes SPIP, initialement sous forme d’icones bitmap, en triangle de la police font-awesome.

Perspectives

-  permettre l’utilisation de FontAwesome pour faire des listes dans SPIP (je cherche une syntaxe adaptée, si quelqu’un a une idée je suis preneur)
-  j’ai imposé SPIP 3.1 pour la compatilibité mais j’ignore s’il pourrait fonctionner avec un SPIP plus ancien (je suis « nouveau » dans le monde SPIP)
-  remplacer les icones « calendrier » et « utilisateur » qui apparaissent dans le « cartouche » des articles SPIP par des icones de FontAwesome.

Voir en ligne : https://plugins.spip.net/picto

Dernière modification de cette page le 27 mars 2018

Retour en haut de la page

Vos commentaires

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • Galleria (fr)

    16 novembre 2011 – 192 commentaires

    Une galerie d’image qui utilise la librairie javascript Galleria. Description Ce plugin vous permet d’ajouter des galeries d’images à vos articles. La galerie créée utilise la librairie javascript Galleria. Le plugin propose un modèle nommé (...)

  • ScolaSPIP 4

    19 janvier 2016 – 371 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Newsletters

    16 janvier 2013 – 474 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 16 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)