ぱふの自由帳

週3更新(火・木・日)を目指すUnityブログ。良ければフォローお願いします(`・ω・´)

【Rails】Font Awesomeの使い方

はじめに

Font Awesomeというサービスを知っているでしょうか?Webアイコンを使用したいときにちょうど良いサービスです。
f:id:PafuOfDuck:20180106233504p:plain

今回はこのサービスの導入〜使用までを紹介したいと思います。
注意:Railsでの導入方法です。Rails以外ではこの方法は使えません。

導入〜使用方法

  1. Gemfileにfont-awesome-railsを追加する
    gem 'font-awesome-rails'のように記述してください。

  2. bundle installを実行

  3. app/assets/stylesheets/application.css*= require font-awesomeを追加
    デフォルトで大量にコメントアウトされている箇所に記述してください。

    --参考画像--
    f:id:PafuOfDuck:20180106234308p:plain

  4. html内に<i class="fa fa-twitter" aria-hidden="true"></i>を記述
    これで、アイコンが表示されるはずです。

今回の例ではTwitterのアイコンが表示されます。他のアイコンが使用したい方は公式サイトから好きなアイコンのページに飛んで、用意されているコードを使用しましょう。

おわり

RailsはFont Awesomeの導入がとても簡単なので、是非使用しましょう!

プロver.もありますので気になる方はご確認を。では〜。