[RUBY] How to insert icons using Font awesome

Introduction

Font awesome can be used when you want to put icons such as menu bar, Facebook, instagram, twitter, etc. in a web page.

What is Font awesome?

It is a web font icon that can be used for free.

Site: Font awesome

How to use

Add font-awesome-sass to Gemfile and bundle install.

Gemfile


gem 'font-awesome-sass' #After adding and bundle install, restart the server

After bundle install, restart the server, Added font-awesome-sprockets and font-awesome to application.scss file. Note that the icons will not be loaded if the loading order is different.

app/assets/stylesheets/application.scss


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

Enter the icon you want in the view (this time, use the fas of class = "fas fa-bars" and the partial bars after fa-). icon is a helper method for font-awesome-sass gem.

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


= icon('fas', 'bars')

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

You can now put the Font awesome icon on your web page

Reference site Font awesome Github pikawaka font-awesome-sass

Recommended Posts

How to insert icons using Font awesome
[Rails] How to install Font Awesome
[Rails] How to install Font Awesome
How to insert a video
How to authorize using graphql-ruby
How to insert an external library
How to execute a contract using web3j
How to sort a List using Comparator
[Rails] How to upload images using Carrierwave
[Java] How to calculate age using LocalDate
[Swift5] How to implement animation using "lottie-ios"
How to make asynchronous pagenations using Kaminari
How to output Excel and PDF using Excella
How to execute and mock methods using JUnit
[Rails] How to create a graph using lazy_high_charts
How to delete a controller etc. using a command
How to play audio and music using javascript
[Ethereum] How to execute a contract using web3j-Part 2-
How to implement the breadcrumb function using gretel
How to insert all at once with MyBatis
How to generate a primary key using @GeneratedValue
How to create hierarchical category data using ancestry
How to link images using FactoryBot Active Storage
How to solve the font specification problem dedicated to using IntelliJ IDEA (Win x64)
[Java] How to operate List using Stream API
[Android Studio] How to change TextView to any font [Java]
How to figure out how much disk Docker is using
How to unit test with JVM with source using RxAndroid
How to make an oleore generator using swagger codegen
How to add characters to display when using link_to method
How to embed youtube videos using iframe tags (haml)
How to delete custom Adapter elements using a custom model
How to install geckodriver (Selenium WebDriver) automatically using WebDriverManager
[How to insert a video in haml with Rails]
How to convert A to a and a to A using AND and OR in Java
How to start tomcat local server without using eclipse
How to use Play Framework without using typesafe activator
Rails learning How to implement search function using ActiveModel
[Rails] How to install a decorator using gem draper
How to dynamically write iterative test cases using test / unit (Test :: Unit)
How to develop OpenSPIFe
How to call AmazonSQSAsync
How to write Rails
How to use rbenv
How to use letter_opener_web
How to use with_option
How to use java.util.logging
How to use map
How to adapt Bootstrap
How to use Twitter4J
How to use active_hash! !!
How to install Docker
How to use hidden_field_tag
How to write dockerfile
How to uninstall Rails
How to install docker-machine
[How to use label]
How to make shaded-jar
How to write docker-compose
How to use identity
How to use hashes