【Rails6】link_to에 FontAwesome을 임베드하는 구체적인 방법 【Copipe OK】

소개



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 아이콘을 포함시키는 방법 !!
  • 좋은 웹페이지 즐겨찾기