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;
}
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
끝까지 읽어 주셔서 감사합니다.
Reference
이 문제에 관하여(Rails6에서 Font Awesome 5 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tai-fuj/items/fdb129866c03ae44ea93텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
