【Rails】Font Awesome의 도입 방법
3407 단어 루비Rails출구 엔지니어FontAwesome
개발 환경
· Ruby : 2.5.7
·Rails: 5.2.4
·Vagrant: 2.2.7
· VirtualBox : 6.1
· OS : macOS Catalina
계정 생성
1. 아래 링크에 액세스한다.
Font Awesome Start 화면
2. 이메일 주소를 입력하고 "Send Kit Code"를 클릭합니다.
3. 확인 메일이 닿으므로 「Click to Confirm Your Email Address + Set Things Up」라고 하는 링크에 액세스한다.
4. 아래 화면으로 이동하므로 비밀번호를 입력하고 "Set Password & Continue"를 클릭합니다.
5. 프로필 정보 입력 화면으로 전환하지만, 지금은 특별히 설정할 필요도 없기 때문에,
아무것도 입력하지 않고 "All set.Let's Go!"를 클릭하십시오.
6. 아래의 화면으로 이동하므로 "Copy Kit Code"를 클릭하여 코드를 복사합니다.
Rails 측 조작
1. application.html.slim 편집
방금 복사한 코드를 붙여 Slim 형식으로 변환한다.
application.html.slimdoctype html
html
head
title
| Font Awesomeテスト
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
/ 追記
script src='https://kit.fontawesome.com/c51513dd6c.js' crossorigin='anonymous'
2. 아이콘 표시
①아래 사이트에 접속하여 사용하고 싶은 아이콘을 클릭한다.
Font Awesome Icon 목록
② 아래와 같은 화면으로 천이하므로 클래스명을 복사한다.
③아래와 같이 HTML에 기술하면 아이콘이 표시됩니다.
~html.slimi.far.fa-heart
Reference
이 문제에 관하여(【Rails】Font Awesome의 도입 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/matsubishi5/items/a4c72f436e64ad106ee8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1. 아래 링크에 액세스한다.
Font Awesome Start 화면
2. 이메일 주소를 입력하고 "Send Kit Code"를 클릭합니다.
3. 확인 메일이 닿으므로 「Click to Confirm Your Email Address + Set Things Up」라고 하는 링크에 액세스한다.
4. 아래 화면으로 이동하므로 비밀번호를 입력하고 "Set Password & Continue"를 클릭합니다.
5. 프로필 정보 입력 화면으로 전환하지만, 지금은 특별히 설정할 필요도 없기 때문에,
아무것도 입력하지 않고 "All set.Let's Go!"를 클릭하십시오.
6. 아래의 화면으로 이동하므로 "Copy Kit Code"를 클릭하여 코드를 복사합니다.
Rails 측 조작
1. application.html.slim 편집
방금 복사한 코드를 붙여 Slim 형식으로 변환한다.
application.html.slimdoctype html
html
head
title
| Font Awesomeテスト
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
/ 追記
script src='https://kit.fontawesome.com/c51513dd6c.js' crossorigin='anonymous'
2. 아이콘 표시
①아래 사이트에 접속하여 사용하고 싶은 아이콘을 클릭한다.
Font Awesome Icon 목록
② 아래와 같은 화면으로 천이하므로 클래스명을 복사한다.
③아래와 같이 HTML에 기술하면 아이콘이 표시됩니다.
~html.slimi.far.fa-heart
Reference
이 문제에 관하여(【Rails】Font Awesome의 도입 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/matsubishi5/items/a4c72f436e64ad106ee8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
doctype html
html
head
title
| Font Awesomeテスト
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
/ 追記
script src='https://kit.fontawesome.com/c51513dd6c.js' crossorigin='anonymous'
i.far.fa-heart
Reference
이 문제에 관하여(【Rails】Font Awesome의 도입 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/matsubishi5/items/a4c72f436e64ad106ee8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)