[Rails 6] Specific method of embedding Font Awesome in link_to [Copy and paste OK]

Introduction

I thought "I want to create a delete button for link_to with an icon" in Rails, so I summarized what I investigated.

Target

People who started making artifacts with Rails

Premise

• Installed bootstrap
• This time we are proceeding with rails 6

goal

Change the display of link_to to "" character "→" icon ""

before

after

Until the "character" of your link_to becomes an "icon"

① "Font Awesome" setting ② Get the icon code you want to use ③ Embed "icon" in "link_to"

① "Font Awesome" setting

This time, I referred to the reference material article! Detailed settings are also described, so please refer to it! [[Rails] Thorough explanation of how to use font-awesome-sass! ] (https://pikawaka.com/rails/font_awesome_sass)

** 1. Introduction of font-awesome-sass **

Gemfile

gem 'font-awesome-sass'

Terminal

bundle install

application.scss

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

** 2. Introduction of font-awesome-rails **

Terminal

brew install yarn

yarn add @fortawesome/fontawesome-free

app/javascript/packs/application.js

import '@fortawesome/fontawesome-free/js/all';

app/assets/stylesheets/application.scss

@import '~@fortawesome/fontawesome-free/scss/fontawesome';

② Get the code of the icon you want to use

1. Go to the link below [Font Awesome] (https://fontawesome.com/icons?d=gallery)

2. Find the icon you want to use This time, look for the trash can icon and select it

3. Copy the displayed code

** Embed the code obtained here in link_to in ③ **

• The part of "Copy and paste this code" in the above image is the code used this time.

③ Embed "icon" in "link_to"

Method Embed the "icon code" you got earlier in the code below

For delete button

after

<%= link_to URL helper, class: "btn btn-danger",HTTP method specification do%>
Icon code#=>Insert here
<% end %>

Example)
<%= link_to URL helper, class: "btn btn-danger", method: :delete do %>
  <i class="far fa-trash-alt"></i> #=>Icon code
<% end %>

For comparison, I will also post the commonly used link_to ↓

before

<%= linl_to "Delete" ,URL helper,class: btn btn-primary, method: :delete %>

Click here for more information. Generate Rails Document Link (htt) ps://railsdoc.com/page/link_to)

template

I will write the code of the image introduced first. Please use it if you like! (Please fill in the URL part yourself)

This is ↓

** Details button (magnifying glass) ** Color => Blue Icon => Mushimegane

Details

  <%= link_to URL ,"btn btn-danger text-white", method: :get do %>
    <i class="fas fa-search"></i> 
  <% end %>

** Edit button (pen) ** Color => Green Icon => Pen

Edit

<%= link_to URL, class: "btn btn btn-secondary text-white", method: :get do %>
  <i class="fas fa-pen"></i>
<% end %>

** Delete button (trash can) **

Color => Red Icon => Trash

Delete

  <%= link_to  URL , class: "btn btn-danger text-white", :method => :delete do %>
    <i class="far fa-trash-alt"></i> 
  <% end %>

Summary

It can be understood by collecting information, but since there was no cohesive page, I summarized it as an output. We would appreciate it if you could refer to it.

Supplement

** My failure ** I ran the following two and failed.

** ① Forcibly embed in the displayed part **

python

  <%= link_to "The icon you want to use" ,URL %>
 　           ---------------             

** ② I forcibly plunged into the class. ** **

  <%= link_to "Delete" ,URL, class:The class of the icon you want to use%>
　　　　　　　　　　　　　　　　 -------------------------

I made the same mistake! If you think, please refer to this article! Lol

Reference material

-[[Rails] Thorough explanation of how to use font-awesome-sass! ] (https://pikawaka.com/rails/font_awesome_sass) -How to embed Font Awesome icon in link_to in Rails4 !!