FontAwesomeの導入

5024 ワード
haml Rails HTML scss FontAwesome HTML テキストリンク

書かれていること

  • 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>

参考ページ

終わりに

hamlの旧形式とHtmlで記述をしていたのですが
Hamlで新しい書き方があるようで忘備録として書いてみました。
別アプリ実装の時に気づいたことがあれば随時、更新予定です。
間違った記述等ございましたら、ご指摘いただけると幸いです。