[RUBY] Comment insérer des icônes à l'aide de Font awesome

introduction

Font awesome peut être utilisé lorsque vous souhaitez mettre des icônes telles que la barre de menu, Facebook, Instagram, Twitter, etc. dans la page Web.

Qu'est-ce que Font awesome?

C'est une icône de police Web qui peut être utilisée gratuitement.

Site: Font awesome

Comment utiliser

Ajoutez font-awesome-sass à Gemfile et installez l'ensemble.

Gemfile


gem 'font-awesome-sass' #Après l'ajout et l'installation du bundle, redémarrez le serveur

Après l'installation du bundle, redémarrez le serveur, Ajout de font-awesome-sprockets et font-awesome au fichier application.scss. Notez que les icônes ne seront pas chargées si l'ordre de chargement est différent.

app/assets/stylesheets/application.scss


@import "font-awesome-sprockets";
@import "font-awesome";

Entrez l'icône que vous voulez dans la vue (cette fois, utilisez le fas de class = "fas fa-bars" et les barres partielles après fa-). icon est une méthode d'aide pour la gemme font-awesome-sass.

rb:app/views/chats/index.html.haml


= icon('fas', 'bars')

スクリーンショット 2020-10-24 19.07.02.png

Vous pouvez maintenant mettre l'icône Font awesome sur votre page Web

Site de référence Font awesome Github pikawaka font-awesome-sass

Recommended Posts

Comment insérer des icônes à l'aide de Font awesome
[Rails] Comment installer Font Awesome
Comment insérer une vidéo
Comment autoriser à l'aide de graphql-ruby
Comment insérer une bibliothèque externe
Comment exécuter un contrat avec web3j
Comment trier une liste à l'aide du comparateur
[Rails] Comment télécharger des images à l'aide de Carrierwave
[Java] Comment calculer l'âge à l'aide de LocalDate
[Swift5] Comment mettre en œuvre une animation à l'aide de "lottie-ios"
Comment sortir Excel et PDF avec Excella
Comment exécuter une méthode et simuler avec JUnit
[Rails] Comment créer un graphique à l'aide de lazy_high_charts
Comment supprimer un contrôleur, etc. à l'aide d'une commande
Comment jouer de la voix ou de la musique en utilisant javascript
[Ethereum] Comment exécuter un contrat en utilisant web3j-Part 2-
Comment mettre en œuvre la fonction de chapelure avec Gretel
Comment tout insérer en même temps avec MyBatis
Comment générer une clé primaire à l'aide de @GeneratedValue
Comment créer des données de catégorie hiérarchique à l'aide de l'ascendance
Comment lier des images à l'aide de FactoryBot Active Storage
Comment résoudre le problème de spécification de police dédié à l'utilisation d'IntelliJ IDEA (Win x64)
[Android Studio] Comment changer TextView en n'importe quelle police [Java]
Comment déterminer la quantité de disque utilisée par Docker
Comment faire un test unitaire avec JVM sur une source à l'aide de RxAndroid
Comment faire un générateur d'oléore en utilisant Swagger Codegen
Comment ajouter des caractères à afficher lors de l'utilisation de la méthode link_to
Comment intégrer des vidéos YouTube à l'aide de balises iframe (haml)
Comment supprimer des éléments d'adaptateur personnalisés à l'aide d'un modèle personnalisé
Comment installer automatiquement geckodriver (WebDriver de Selenium) à l'aide de WebDriverManager
[Comment insérer une vidéo dans un hameau avec Rails]
Comment convertir A en A et A en A en utilisant le produit logique et la somme en Java
Comment démarrer le serveur local de Tomcat sans utiliser eclipse
Comment utiliser Play Framework sans utiliser l'activateur de sécurité
Comment écrire dynamiquement des cas de test itératifs à l'aide de test / unit (Test :: Unit)
Comment développer OpenSPIFe
Comment appeler AmazonSQSAsync
Comment écrire des rails
Comment utiliser rbenv
Comment utiliser with_option
Comment utiliser java.util.logging
Comment utiliser la carte
Comment utiliser Twitter4J
Comment utiliser active_hash! !!
Comment installer Docker
Comment désinstaller Rails
Comment installer docker-machine
[Comment utiliser l'étiquette]
Comment faire un pot ombré
Comment écrire docker-compose
Comment utiliser l'identité
Comment utiliser le hachage