[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

goal

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

before after.png

after before.png

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 ゴミ箱アイコンの検索.png

  3. Copy the displayed code ゴミ箱アイコンのコードを取得.png

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

③ 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 ↓

before.png

** 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 !!

Recommended Posts

[Rails 6] Specific method of embedding Font Awesome in link_to [Copy and paste OK]
Introduction and usage explanation of Font Awesome
[Order method] Set the order of data in Rails
[Rails] Ranking and pagination in order of likes
[Rails] [Docker] Copy and paste is OK! How to build a Rails development environment with Docker
Summary of frequently used commands in Rails and Docker
List of copy and paste collections that are useful when creating apps with Ruby on Rails
Method definition location Summary of how to check When defined in the project and Rails / Gem