FontAwesome 소개

3980 단어 hamlRailsHTMLscssFontAwesome

쓰여진 것


  • FontAwesome이란?
  • Haml에서 사용할 때
    1.FontAwesome 용 gem 설치
    2.import
    3.Haml의 기술 방법
  • Html로 사용할 때
    1. HTML 파일에 설명
  • 참고 페이지

  • 끝에

    FontAwesome이란?



    웹 폰트의 일종으로, 문자를 취급하는 것처럼 아이콘을 표시시킬 수 있다

    Haml에서 사용할 때



    1.FontAwesome 용 gem 설치



    Gemfile
    gem 'font-awesome-sass'
#最下部に追加する

  • Gemfile에 추가하면 bundle install 서버를 다시 시작

    • 2.import



    application.scss
    @import "font-awesome";

    3.Haml의 기술 방법



    보려는 페이지.html.haml
    .クラス名
 = fa_icon 'acorn', class: 'icon'
  • FontAwesome 페이지를보고 사용하려는 아이콘을 찾습니다.

    다른 묘사


    Gemfile 에 기술해 bundle 까지는 동일

    application.scss
    @import "font-awesome-sprockets";
@import "font-awesome";

    보려는 페이지.html.haml
    %i.fa.fa-acorn　←これでできてる人もいましたが私はだめでした

#または
= icon('fab', 'twitter')#←右側はFontAwsomeの公式ページをみて表示したいアイコン名を入れてね（この記述は成功！）

= icon('fas', 'image', class: 'icon')#こうするとクラスの指定もできるのでscssが当てられる

    아이콘 사용자 정의! 색을 바꿀 수 있다
    Font Awesome 5의 사용법과 커스터마이즈 방법을 철저 해설!

    HTML로 사용할 때



    1. HTML 파일에 설명


  • head에 링크 작성
  • 임의의 장소에 아이콘의 기술을 한다

    • 보려는 페이지.html.erb
    #headの中
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
###中省略
<div class="iconのクラス名">
 <i class="fas fa-acorn"></i>　#ここが丸々、アイコンをさすコード
</div>



    참고 페이지


  • FontAwesome
  • 【저장판】 Font Awesome 사용법 : 웹 아이콘 글꼴을 사용합시다

    • 끝에



    haml의 구형식과 Html로 기술을 하고 있었습니다만
    Haml에서 새로운 쓰는 방법이 있는 것 같고 망비록으로 써 보았습니다.
    다른 앱 구현시에 깨달은 적이 있으면 수시로 갱신 예정입니다.
    잘못된 설명 등이 있으시면 지적해 주시면 감사하겠습니다.
    Gatsby에서 Font Awesome을 사용하고 싶습니다.
    【Vue.js】Vue-CLI4.1.1에서 Font awesome5를 사용하는 순서

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage