Rails6에서 Font Awesome 5 사용

5923 단어 SassRails6FontAwesome

소개



rails6에서 FontAwesome5를 사용할 기회가 있었으므로 도입 방법을 공유합니다.
(rails5도 거의 같다고 생각합니다)
이번에는 CDN (링크를 사용하여 읽는 방법) 대신 gem을 사용합니다.

개발 환경



rails 6.0.2
루비 2.6.5

최소한의 설정



※ 필요에 따라 파일 이름 등을 변경하십시오.

rails new 앱 이름 -d postgresql
rails db:create
rails g controller fonts

gem 도입



다음을 추가하여 bundle install

Gemfile
(省略)
gem 'font-awesome-sass'

코드 작성



root 화면을 설정합니다. def index를 fonts 컨트롤러에 씁니다 (설명을위한 편의상)

config/routes.rb
Rails.application.routes.draw do
  root to: 'fonts#index'
end

app/controllers/fonts_controller.rb
class FontsController < ApplicationController
  def index; end
end

stylesheets의 설명입니다 (아이콘의 색상은 분홍색입니다)

app>assets>stylesheets>components>maps.scss
.icons {
  padding:  10px;
  display: flex;
  flex-wrap:wrap;
}

.icon {
  color: pink;
  margin:  10px;
}
  • application.css를 application.scss로 바꾸고 font-awesome을 가져옵니다.

    app>assets>stylesheets>application.scss
    @import "font-awesome-sprockets";
    @import "font-awesome";
    

    View에 font-awesome을 작성합니다.

    집 아이콘을 내려 봅니다.

    app>views>fonts>index.html.erb
    <h5>FontAwesomeアイコン</h5>
    <div class="icons">
        <div class="icon">
            <%= icon('fas','home')%>
        </div>
    </div>
    

    여기까지의 출력입니다



    크기를 조정하고 여러 아이콘을 정렬합니다.

    class의 fa-3x로 사이즈 조정, fa-fw로 각 아이콘의 폭을 가지런히 하고 있습니다.

    app>views>fonts>index.html.erb
    <h5>FontAwesomeアイコン</h5>
    <div class="icons">
      <div class="icon">
        <%= icon('fas','home',class: "fa-3x fa-fw" )%>
      </div>
      <div class="icon">
        <%= icon('fas','star',class: "fa-3x fa-fw" )%>
      </div>
      <div class="icon">
        <%= icon('fas','taxi',class: "fa-3x fa-fw" )%>
      </div>
      <div class="icon">
        <%= icon('fas','train',class: "fa-3x fa-fw" )%>
      </div>
    </div>
    



    자신이 사용하고 싶은 아이콘을 찾아보세요



    아래 사이트에서 아이콘을 찾아보세요. 유료 물건과 무료 물건이 있습니다.
    FontAwesome

    이번에는 좋다! 버튼을 찾아 보겠습니다.

    thumbs-up의 이름으로 발견되었습니다!


    아이콘 위에 라는 설명이 있습니다.  
    rails의 view로 사용할 때는 <%= icon('far','thumbs-up')%>로 하는 것으로 아이콘을 낼 수 있습니다.
    (icon 메소드는 헬퍼이므로 다른 쓰는 방법도 물론 가능합니다.)

    view에 설명합니다.

    app>views>fonts>index.html.erb
    <h5>FontAwesomeアイコン</h5>
    <div class="icons">
      <div class="icon">
        <%= icon("far","thumbs-up",class: "fa-5x", style: "color: rgb(97,103,112);")%>
      </div>
    </div>
    



    자신의 취향에 맞춤설정



    좋아요! 버튼을 돌리거나 방향을 바꿉니다.

    app>views>fonts>index.html.erb
    <h5>FontAwesomeアイコン</h5>
    <div class="icons">
      <div class="icon">
        <%= icon("far","thumbs-up",class: "fa-5x fa-pulse", style: "color: rgb(97,103,112);")%><br>
        <%= icon("far","thumbs-up",class: "fa-5x fa-rotate-180", style: "color: rgb(97,103,112);")%>
        <%= icon("far","thumbs-up",class: "fa-5x fa-rotate-270", style: "color: rgb(97,103,112);")%>
        <%= icon("far","thumbs-up",class: "fa-5x fa-flip-horizontal", style: "color: rgb(97,103,112);")%>
        <%= icon("far","thumbs-up",class: "fa-5x fa-flip-vertical", style: "color: rgb(97,103,112);")%>
      </div>
    </div>
    



    아이콘에 연결



    쓰기가 바뀝니다. (path를 변경하십시오)

    app>views>fonts>index.html.erb
    <h5>FontAwesomeアイコン</h5>
    <div class="icons">
      <div class="icon">
        <%=link_to(content_tag(:i,'いいね!',class:"far fa-thumbs-up fa-3x",style: "color: rgb(97,103,112);"),root_path)%>
      </div>
    </div>
    



    마지막으로



    기타 많은 사용자 정의가 가능합니다.
    다음 사이트가 도움이 됩니다.
    w3곳 ls. 작은 m

    끝까지 읽어 주셔서 감사합니다.
  • 좋은 웹페이지 즐겨찾기