How to Install FontAwesome with Yarn and Webpacker in Rails 6?

I'm a passionate software developer.
Search for a command to run...

I'm a passionate software developer.
No comments yet. Be the first to comment.
Situation When Rails app is running, it incorrectly searches for stylesheets in the app/assets/stylesheets instead of the intended app/javascript/stylesheets, resulting in issues with the correct functioning of the stylesheets. Current configuration...
Components Introduction In order to truly understand props in React, we first need to be clear on what components are. A component is a reusable piece of the user interface that encapsulates structure, styling, and behavior. Instead of repeating the ...

Introduction Context By default, Codespace is using the GITHUB_TOKEN env var (the “Codespaces token”), which can’t create repos. It’s necessary to authenticate gh with a token/account that has the right scopes, or create the repo on the web first. Ob...

Solution Here it is: git commit --allow-empty-message -m "" Explanation To create a Git commit without a message, or with an empty message, you can use the --allow-empty-message flag with the git commit command. git commit --allow-empty-message -m "...

Steps Cleanup phase This phase’s goal is to removes existing containers, volumes, networks and images Stop and remove volumes docker compose down --volumes --remove-orphans The previous command stops and removes containers, networks, and default volu...

Steps Stop the service It’s not mandatory, but before uninstalling, it's a good practice to stop any running Docker services. sudo systemctl stop docker Remove docker packages It’s used to completely and forcefully remove a list of specified packag...

Font Awesome is a popular collection of icons and symbols that you can use in web development to enhance the visual appeal and functionality of your website or application.
yarn add @fortawesome/fontawesome-free
Output

npm list
Output

In the main javascript file, which is app/javascript/packs/application.js, add the following:
# app/javascript/packs/application.js
import "@fortawesome/fontawesome-free/css/all"
Output
# app/javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
import "bootstrap"
import "stylesheets/application"
import "channels"
import "@fortawesome/fontawesome-free/css/all"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
The statement import "@fortawesome/fontawesome-free/css/all" is used to import the Font Awesome icon library's CSS file, which includes all the icon styles and definitions, into your JavaScript code. This is typically done in a JavaScript or TypeScript file to ensure that the Font Awesome icons are available and styled properly when used in your web application.
In the terminal emulator:
CTRL + C
rails start
Choose any view page and insert a fontAwesome icon.
# app/views/test/index.html.erb
<h1>Test#index</h1>
<p>Find me in app/views/test/index.html.erb</p>
<i class="far fa-gem fa-spin fa-3x"></i>
Home
Full code:
# app/views/test/index.html.erb
<h1>Test#index</h1>
<p>Find me in app/views/test/index.html.erb</p>
<i class="far fa-gem fa-spin fa-3x"></i>
Home

You've made it!

I hope this article has been helpful to you. Please feel free to reach out if you have any questions. Your thoughts, suggestions, and corrections are more than welcome.
By the way, don't hesitate to drop your suggestions for new blog articles.
I look forward to seeing you next time.