L'essentiel de Ruby on Rails

Utiliser une font icon

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les font icons sont fréquemment employées dans les applications web. Découvrez comment incorporer la boîte à outils Font Awesome à Ruby on Rails.
03:01

Transcription

Connaissez-vous les font icons ? Peut-être pas. Il s’agit de polices de caractère incluant uniquement des icônes. L’avantage de ces polices de caractère avec des formes d’icône est que nous pouvons personnaliser facilement ces icônes. En effet, comme il s’agit d’une police de caractère, nous pouvons lui appliquer n’importe quelle règle CSS s’appliquant habituellement sur des polices. De plus, les icônes sont généralement réalisées en SVG, à savoir : ce sont des images vectorielles, ce qui signifie que lorsque vous les redimensionnez, il n’y a pas de perte de qualité au niveau de l’image. Nous allons voir comment intégrer font-awesome dans une application Ruby on Rails. En réalité, c’est très simple. Il existe une gem, vous vous en doutiez peut-être. L’installation de la gem n’est guère différente des autres. Il faut ajouter cette ligne au sein de notre Gemfile, ce que nous faisons, puis ajouter ce code au sein de l’application .css. N’oubliez pas d’arrêter votre serveur Rails, d’executer bundle install, puis de le relancer à l’aide de la commande rails server. La gem intègre des méthodes que nous pouvons utiliser directement dans nos vues. Par exemple, pour inclure l’icône camera_retro, il suffit d’utiliser la méthode fa_icon. Cela aura pour effet de générer le tag HTML que vous voyez ci-dessous. Nous allons utiliser cette icône pour la mettre à côté de notre titre dans l’index de nos sujets de discussion. Retenez ce nom: fa-book. Maintenant que nous avons installé la gem font-awesome-rails, nous pouvons utiliser la méthode que nous avons vue tantôt. Cette méthode prend en paramètre le nom de l’icône à intégrer. Allons voir ce que cela donne dans notre application. Rafraichissons. Et voilà, nous voyons l’icône qui apparait bien au niveau de notre titre. Avant de terminer cette vidéo, j’aimerai revenir sur ce que contient application.css. Chaque ligne ici contient le mot-clé require. Lorsqu’il est utilisé seul, il ira chercher le fichier css correspondant, par exemple ici, foundation_and_overrides que l’on voit juste en-dessous de l’application .css. require_tree chargera tous les fichiers qui iront dans le dossier précisé à la suite. S’il y avait un sous-dossier, par exemple, basic, voici comment nous l’aurions écrit. require_self indique que le fichier se charge lui-même. Autrement dit, s’il y a du code css à la suite de ses commentaires, il sera bien chargé. Nous retrouvons cette même logique au niveau d’application.js. Si, lorsque vous installez une nouvelle gem intégrant des fichiers javascript ou css et que vous n’y avez pas accès depuis votre application, c’est très certainement que vous avez oublié d’ajouter le mot requis require pour convenablement charger ces bibliothèques. Cette vidéo vous a présenté une font icon, à savoir font-awesome. Elle vous a également montré comment l’intégrer dans l’application Ruby on Rails et comment l’utiliser.

L'essentiel de Ruby on Rails

Concevez des applications web évolutives et intemporelles avec Ruby on Rails. Installez l’environnement, réalisez un projet de stack overflow, enrichissez-le, etc.

6h08 (85 vidéos)
Aucun commentaire n´est disponible actuellement

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !