소개

Rails에서 「link_to의 삭제 버튼을 아이콘으로 작성하고 싶다」라고 생각해, 조사한 내용을 정리했습니다.

대상

Rails에서 아티팩트를 만들기 시작한 사람

전제

bootstrap 도입

이번에는 rails6에서 진행하고 있습니다

목표

link_to 표시를 ""문자"→ "아이콘""으로 변경합니다.

before


after

link_to의 "문자"가 "아이콘"이 될 때까지

① "Font Awesome"설정
②사용하고 싶은 아이콘 코드를 취득
③ 'link_to'에 '아이콘' 포함

① "Font Awesome" 설정

이번은 참고 자료의 기사를 참고로 했습니다!
세세한 설정도 기재되어 있으므로, 참고로 해 주세요!
【Rails】font-awesome-sass의 사용법을 철저 해설!

1.font-awesome-sass의 도입

Gemfile

gem 'font-awesome-sass'

터미널

bundle install

application.scss

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

2.font-awesome-rails의 도입

터미널

brew install yarn

yarn add @fortawesome/fontawesome-free

app/javascript/packs/application.js

require("@fortawesome/fontawesome-free/js/all")

app/assets/stylesheets/application.scss

@import "@fortawesome/fontawesome-free/scss/fontawesome";

②사용하고 싶은 아이콘의 코드 취득

1. 다음 링크로 이동
Font Awesome

2. 사용하려는 아이콘 찾기
이번에는 휴지통 아이콘을 찾아 선택합니다.


3. 표시된 코드 복사


여기에서 취득한 코드를 ③으로 link_to에 삽입
* 위 이미지의 "이 코드를 복사"부분이 이번에 사용하는 코드입니다

③ 'link_to'에 '아이콘' 포함

방법
아래 코드에 이전에 얻은 '아이콘 코드'를 포함합니다.

삭제 버튼의 경우

after

<%= link_to URLヘルパー, class: "btn btn-danger", HTTPメソッドの指定 do %>
   アイコンのコード  #=>　ここに挿入する   
<% end %>

例）
<%= link_to URLヘルパー, class: "btn btn-danger", method: :delete do %>
  <i class="far fa-trash-alt"></i> #=>　アイコンのコード
<% end %>

비교로서, 일반적으로 사용하는 link_to도 붙여 둡니다↓

before

<%= linl_to "削除" , URLヘルパー ,class: btn btn-primary, method: :delete %>

자세한 정보는 여기를 참조하십시오.
Rails 문서 링크 생성

템플릿

먼저 소개한 이미지의 코드를 기재해 둡니다.
원한다면 사용하십시오! (URL의 부분은 스스로 기입해 주세요)

이것은 ↓



상세 버튼(돋보기)
색상 => 블루 아이콘 => 돋보기

상세

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

편집 버튼(펜)
색상 => 녹색 아이콘 => 펜

편집

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

삭제 버튼(휴지통)

색상 => 레드 아이콘 => 휴지통

삭제

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

요약

정보를 모으면 이해할 수 있습니다만, 정리된 페이지가 없었기 때문에 아웃풋으로서 정리했다.
참고해 주시면 감사하겠습니다.

보충

내 실패 예
다음 두 가지를 실행하고 실패했습니다.

①표시하는 부분에 무리하게 묻는다

  <%= link_to "使用したいアイコン" ,URL %>
 　           ---------------             

②class에 무리하게 돌진했습니다.

  <%= link_to "削除" ,URL, class:使用したいアイコンのクラス%>
　　　　　　　　　　　　　　　　 -------------------------

같은 실수를 했다! 라고 생각하시는 분은, 꼭 이 기사를 참고해 주세요! 웃음

참고 자료

【Rails】font-awesome-sass의 사용법을 철저 해설!

Rails4에서 link_to에 Font Awesome 아이콘을 포함시키는 방법 !!