On dit toujours qu’une image vaut mieux long discours.
Apprenez à utiliser les icônes avec le Framework BootStrap 3.
Découvrez comment les agrandir, les superposer ou encore les faire tourner.
En bonus des icônes présentes dans BootStrap 3, vous verrez également la bibliothèque d’icônes Font Awesome.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser et ajouter des icônes avec le Framework BootStrap 3
Bonjour à tous et bienvenu sur développement facile donc encore un cours dédié à votre apprentissage, l’utilisation du framework BootStrap 3. Dans ce nouveau cours vous allez apprendre comment utiliser les icônes par exemple vous allez savoir superposer deux icones différentes les unes sur les autres automatiquement avec le framework BootStrap. L’avantage des icônes du framework BootStrap, c’est qu’elles sont créées en mode vectoriel vous pouvez les zoomer autant de fois que vous le souhaitez sans perdre en qualité et le vectoriel s’affiche beaucoup plus rapidement qu’une image donc c’est très pratique ça présente énormément davantage pour l’affichage de votre site Web.
Les icônes
Donc bien évidemment on dit toujours qu’une image vaut mieux que 1000 mots donc toujours pensaient à utiliser des icônes plutôt que de mettre des pavés texte dans votre site s’il y a une icône qui résume tout votre texte mettez une icône.
Donc BootStrap trois propose la bibliothèque d’icônes Glyphicon, une bibliothèque très complète avec plusieurs icônes. Je vous ai mis le lien /components pour voir toutes les icônes disponibles dans BootStrap 3, il y en a à peu près 180, plus les versions avancent dans BootStrap, plus il y a d’icônes. Donc pour utiliser une icône, il suffit d’ajouter la classe glyphicon avec le nom de l’icône tout simplement. Donc vous avez une balise p, classe glyphicon et derrière le nom de l’icône dans une balise page et les icônes générées, (excusez-moi pour la faute d’orthographe sur afficher, désolé) vont s’afficher de façon ergonomique et la taille et leur couleur vont s’ajuster en fonction de la page HTML et du DOM. Je vous ai mis un exemple glyphicon , classe glyphicon, et après vous spécifier l’icône, glyphicon-home donc ce sera une icône d’accueil après dans l’exemple du dessous, glyphicon-comment une icône commentaire dans un label donc dans une zone de texte mis en valeur avec une icône commentaire tout simplement .
Les icones Font Awesome
Donc il existe comme je vous l’ai dit dans un premier cours dans le cours présentation BootStrap 3, il y a des extensions BootStrap qui existe pour ajouter des éléments supplémentaires donc la bibliothèque Font Awesome 4, c’est une bibliothèque qui contient plus de 439 icônes développées spécialement pour le framework BootStrap par Dave Gandy donc ce plugin ça ajoute plusieurs possibilités pour justement manipuler les icônes avec BootStrap 3. Je vous ai mis le lien si vous voulez télécharger cette bibliothèque avec plus de 400 icônes supplémentaires donc là vous aurez plus de 500 icônes comme choix pour vos sites Internet donc à mon avis, vous allez forcément trouver votre bonheur.
Donc Font Awesome utilise également une police de caractère vectoriel, vous pouvez agrandir la taille des icônes à l’infini tout en conservant la même qualité d’affichage c’est ce que je vous ai expliqué au début du cours sur l’avantage du vectoriel donc que pour agrandir les icônes vous avez des classes CSS qui sont disponibles justement pour ça. fa-lg ça va grandir les icônes de 33 %, fa-2x 2 fois plus grande, donc la double, fa-3x trois fois plus grandes etc. jusqu’à fa-5x cinq fois plus grandes. Vous avez une balise i avec la classe fa, (fa donc Font Awesome) -linkedin pour l’icône linkedin-square en carré avec rectangle arrondi et fa-5 la grossirent de cinq fois sa taille. Vous pouvez également modifier les listes à puces sans manipuler le CSS grâce à Font Awesome et les classes fa-ul et fa-li donc aussi simple que ça vous mettez la classe fa-li, fa-ur pour afficher le signe euro fa-usd pour afficher le signe dollar. Font Awesome propose de faire des rotations sur les icônes vraiment très simplement en utilisant la classe fa-rotate et le nombre de degré. Rotation à 90°, rotation à 180°. Je vous ai mis des exemples. Par exemple fa-paper-plane donc sur un avion, fa-4x on affiche sa taille on la multiplie par quatre et fa-rotate-90 on le tourne de 90° tout simplement je vais vous montrer un exemple de code source juste à la fin de ce cours, comme ça vous verrez visuellement ce que ça donne. Vous avez la classe fa-spin donc pour Font Awesome. Vous pouvez créer un effet de rotation animée rappelez-vous lorsque vous avez créé votre sites Ajax si vous ne connaissez pas ou ne savez pas utiliser Ajax il y a une trentaine de cours sur développement facile consacré à la technologie Ajax comment la mettre en œuvre avec les exemples de code source vous invite à aller vous inscrire à la formation Ajax, elle est gratuite sur développement facile. Vous allez sur un cours, en dessous il y a un formulaire mail vous vous inscrivez, c’est gratuit et vous recevrez tout une liste de cours dédiez à Ajax. Donc si vous savez utiliser Ajax vous avez souvent chargement en cours quand vous interroger le serveur y’a un message chargement en cours avec une icône qui tourne et bien Font Awesome permet de reproduire très simplement ce comportement vous affichez votre icône, je vous ai mis un exemple de code source fa-spin, on va la doubler fa-2x pour qu’elle soit 2 fois plus grande, fa-spin ça va faire une rotation animée en continu.
Et je vous ai dit au début de cours que vous allez apprendre à superposer deux icônes les unes sur les autres et bien la classe fa-stack permet ce système de superposition donc vous prenez des icônes existantes de Font Awesome ou vous créez vos propres icônes et après vous utiliser la classe fa-stack comme vous le voyez sur votre écran dans une balise page fa-stack, fa-2x c’est pour, comme je vous l’ai dit, grossir l’icône deux fois plus et voilà dans un texte de danger text-danger vous avez l’icône pinterest et l’icône ban les unes sur les autres et donc ça barre l’icones pinterest pour dire qu’il y a un danger.
Exemple d’application
Je vais vous montrer tout de suite ce que ça donne visuellement. Donc là vous voyez déjà les icônes le nombre de commentaires et là le bouton. Alors comment on fait ça. Glyphicon rappelez-vous, hand les icônes BootStrap, la main droite et votre texte dans une balise h3 dans une balise p par exemple span glyphicon-home pour revenir à l’acceuil donc vous pouvez mettre bien évidemment un lien ce serait plus une balise a qu’il faudrait mettre. 69 commentaires pour mettre en avant le nombre de commentaires donc cumuler le label label-primary donc fond bleu avec une icône glyphicon-comment avec du texte donc 69 commentaires sur un article de blog. Vous pouvez créer un bouton avec le bouton shopping donc le panier participer à cette formation on peut le mettre en success par exemple il va passer en vert tout simplement. Ensuite vous avez lead, c’est pour un résumé donc text-warning avec l’icône warning, attention, donc sous forme de résumés, faites attention.
Là, on va utiliser la bibliothèque Font Awesome donc linkedin avec les coins arrondis, suqare, multiplié par 5, par exemple on va la mettre trois fois plus grande pour l’icône google+, elle sera plus petite parce que les autres sont 5 fois plus grande. Pour utiliser dans les listes le signe euro, dollar, livre sterling, le yen tout simplement pour utiliser les devises. Donc l’avion 4 fois donc en position original zoomé quatre fois. On le déplace de 90°, on le déplace de 180° de 270° et si je mets 350°, il aura presque fait un tour et je vais agrandir sa taille tout simplement. Donc je pense que ce sera visible qu’il auras pas fait un tour complet, c’est difficile. Ensuite vous avez la rotation en continue… Ensuite vous avait la superposition d’icône donc comme je vous l’ai dit le danger tout seul l’icône pinterest et on superpose les deux icônes ici danger et pinterest. Pareil le message d’alerte, là l’icône on superpose le cercle avec l’icône vine, donc le cercle et zoomé 2 fois et là on inverse pour passer en couleur blanche le texte donc on passe l’icône en blanc. Donc l’affichage est respecté quel que soit le périphérique.
Votre plan d’actions !
Donc maintenant c’est à vous de jouer, comme d’habitude vous retrouver sous cette vidéo le code source complet et utilisé pendant ce cours. Vous pouvez poser également toutes vos questions sous cette vidéo. Et maintenant il y a une deuxième vidéo où vous allez aller beaucoup plus loin avec BootStrap 3, HTML 5, CSS 3. Donc je vous invite à consulter cette deuxième vidéo, c’est à dire qu’à la fin de cette vidéo, il y a un lien qui va apparaître, vous cliquez sur ce lien et vous serez redirigés justement vers la deuxième vidéo donc je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle]
[/ppmaccordion]
Télécharger l’exemple d’utilisation des icônes
Retrouvez le code source commenté pour revoir les différentes utilisations des icônes vues dans ce cours.
Téléchargement du code source Exemple d'utilisation des icônes de BootStrap 3 et Font Awesome
