Add an icon to the header link using Rails fontawesome

This time, I will share as a memo for myself how to add an icon to the header that I had a hard time unexpectedly.

environment

ruby2.6.5 Rails 6.0.3.3

css framework

bulma

Conclusion

You can easily display the icon by introducing font-awesome-sass and using the helper method icon. Below is the actual code.

ruby:header.html.erb


<%= link_to  icon('fas','sign-in-alt', 'Login'), new_user_session_path, class: "navbar-item" %>
<%= link_to icon('fas', 'user-plus', 'sign up'), new_user_registration_path, class: "navbar-item" %>

Result ↓ スクリーンショット 2020-11-02 20.47.58.jpg

Introduction of font-awesome-sass

Add the following to the Gemfile

Gemfile


gem 'font-awesome-saas'

Run bundle install in the terminal

Next, add the following to app / assets / stylesheets / application.scss. If you are using application.css, convert it to scss.

stylesheets/application.scss


@import 'font-awesome-sprockets';
@import 'font-awesome';

Run rails s and restart the server.

The preparation is complete! All you have to do is write the code! Isn't it really easy? I think that just having an icon will change the impression of your portfolio, so please use the icon. I would like you to add it and improve the appearance!

I hope it helps similar programming beginners.

Reference article

[Rails] Thorough explanation of how to use font-awesome-sass!

Recommended Posts

Add an icon to the header link using Rails fontawesome
[Rails 6] Add images to seed files (using Active Storage)
[Rails] How to display an image in the view
[Rails] Create an echo bot using the LINE Messaging API.
4 Add println to the interpreter
[Rails] Add column to devise
Rails 5.2 allows IE to open directly without saving the link
[Ruby On Rails] How to update the calculated result to an integer type column using update_column
After learning Progate, I tried to make an SNS application using Rails in the local environment
How to make an image posted using css look like an icon
[Development log ⑮] I want to add an external link or PDF link
[Rails 5] How to display the password change screen when using devise
Add Extended Attributes to the file
[Rails] How to add new pages
[Rails] Add strong parameters to devise
[Rails 6] destroy using the resources method
How to add the delete function
[Rails] Reflection to db using seeds.rb
How to set an image in the drawable Left / Right of a button using an icon font (Iconics)
[Rails] I was addicted to the nginx settings when using Action Cable.
Gorigori beginners summarized how to operate the database using rails console Ntiunus
Rails tutorial Resolved an error deploying to Heroku, so note the solution
[Rails 6] cocoon_ Add id and data attributes to the form to be added
[Rails] How to create a table, add a column, and change the column type
Deploy a Node.js application to an ECS instance using the Cloud Toolkit
[Swift] How to set an image in the background without using UIImageView.
[Ruby On Rails] How to search the contents of params using include?
[Rails] Create an evaluation function using raty.js
Migration file to add comment to Rails table
[Rails] How to upload images using Carrierwave
Try using the Rails API (zip code)
[Rails] How to use the map method
Introduced Vue.js to an existing Rails app
I wanted to add @VisibleForTesting to the method
[Rails] [Memo] When to add = to <%%> and when not
The process of introducing Vuetify to Rails
How to implement image posting using rails
[Rails] How to handle data using enum
Introduced Vuetify to an existing Rails app
[Ruby on Rails] How to make the link destination part of the specified id
Try adding text to an image in Scala using the Java standard library