rails의 button_to mesot에 font Awesome을 적용하는 방법
2634 단어 button_toRailsFontAwesome
소개
rails로 포트폴리오를 만들고 있어 계획하고 있던 기능 요건이 한결같이 끝났으므로, 조금 디자인을 정돈해 보자고 하게 되었습니다.
처음에는 좋은 버튼을 정리하려고 생각하고 Font Awesome을 사용하기로 결정했습니다.
Font Awesome은 CSS에서 웹 아이콘을 쉽게 도입할 수 있는 도구입니다.
Font Awesome을 html 파일로 사용하는 방법
Font Awesome을 사용하는 준비입니다.
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
</head>
head 태그에 이렇게 기술합니다.
haml 파일로 사용할 때는 순서가 다르므로 이쪽의 기사를 참조하십시오.
button_to 메소드에 적용
먼저 Font Awesome 홈페이지로 이동하여 사용하려는 아이콘을 찾아 코드를 복사합니다.
그리고 이렇게 설명합니다.
<%= button_to article_likes_path(@article),class: "btn btn-primary", method: :post do %>
<i class="far fa-heart"></i>イイね
<% end %>
그러면, 이런 느낌에 조금은 외형이 정돈된 이이네 버튼이 완성됩니다. (bootstrap을 도입하고 있으므로, class="btn btn-primary" 로 파랗게 되어 있습니다")
추상화하면 이런 느낌입니다.
<%= button_to URL, クラス, HTTPメソッドの指定 do %>
<i class="使いたいアイコンのコード"></i>ボタンに表示する文字 #なくてもよい
<% end %>
・button_to의 뒤에, 버튼에 넣고 싶은 문자를 기입한다
· button_to와 URL 사이에 쉼표를 넣습니다.
등하면 에러가 되어 버리므로 조심해 주세요.
결론
button_to에 적용하는 새로운 기사가 히트하지 않았기 때문에, 아웃풋으로서 써 보았습니다.
Font Awesome은 무료로도 세련된 디자인의 아이콘이 많이 있으므로, 적극적으로 사용해 나가려고합니다!
Reference
이 문제에 관하여(rails의 button_to mesot에 font Awesome을 적용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yu_kasago/items/642dfcfe5e248500307a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
</head>
<%= button_to article_likes_path(@article),class: "btn btn-primary", method: :post do %>
<i class="far fa-heart"></i>イイね
<% end %>
<%= button_to URL, クラス, HTTPメソッドの指定 do %>
<i class="使いたいアイコンのコード"></i>ボタンに表示する文字 #なくてもよい
<% end %>
Reference
이 문제에 관하여(rails의 button_to mesot에 font Awesome을 적용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yu_kasago/items/642dfcfe5e248500307a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
