Font awesomeを使用したアイコンの入れ方

2378 ワード
Ruby scss FontAwesome haml Ruby テキストリンク

はじめに

ウェブページ内にメニューバーやFacebook、instagram、twitterなどのアイコンを入れたいと思った時にFont awesomeが使える。

Font awesomeとは

無料で使えるウェブフォントアイコンである。

サイト:Font awesome

使い方

Gemfileにfont-awesome-sassを追加し、bundle installする。

Gemfile
gem 'font-awesome-sass' #追加しbundle install後、サーバーを立ち上げ直す

bundle install後、サーバーを立ち上げ直し、
application.scssファイルにfont-awesome-sprocketsとfont-awesomeを追加。
読み込む順番が異なるとアイコンが読み込まれないので注意が必要。

app/assets/stylesheets/application.scss
@import "font-awesome-sprockets";
@import "font-awesome";

ビューに欲しいアイコン（今回は、class="fas fa-bars"のfasとfa-以降の部分barsを使用）を入力する。
iconはfont-awesome-sassのgemのヘルパーメソッド。

app/views/chats/index.html.haml
= icon('fas', 'bars')

これで、ウェブページにFont awesomeのアイコンを入れることができる

参考サイト
Font awesome Github
pikawaka font-awesome-sass