SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 120 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

  • Grappes 1.0

    23 novembre 2012 – 38 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)

  • Story (HTML5UP)

    17 mai – 16 commentaires

    Squelette SPIP "onepage" pour intégrer le thème Story de HTML5UP https://html5up.net/story Ce squelette permet de réaliser très simplement des sites de type "one page" sans toucher une ligne de code. Site de démonstration Installation A (...)

  • Mediabox avec texte

    30 mars 2015 – 20 commentaires

    Tout pareil que la Mediabox de SPIP sauf qu’on affiche le titre entier et la description entière de l’image dans l’agrandissement de l’image. La présence simultanée de texte et image n’est pas forcément évidente à réaliser dans un agrandissement (...)

  • Bouquinerie V2 : guide de l’utilisateur

    3 janvier – 12 commentaires

    Configuration quels contenus Selon la maquette adoptée pour votre site, vous pouvez décider que certains éléments des livres ou auteurs de livre ne sont pas utilisés. Vous trouverez dans la page de configuration du plugin la possibilité de (...)

  • Installation de SoyezCréateurs

    24 juin 2009 – 170 commentaires

    SoyezCréateurs est un squelette très paramétrable, multi-usages, RWD et accessible (WCAG/RGAA). Créé à l’origine pour SPIP 1.6 en 2003, il a évolué avec SPIP et est parfaitement adapté à SPIP 3.2 ! Installation Le squelette SoyezCreateurs est un (...)