【Rails】FontAwesomeの導入方法

2444 ワード
Rails FontAwesome Rails テキストリンク

はじめに

この記事はFontAwesomeの導入方法について説明します。

Font Awesomeとは、自身のウェブサイトやアプリケーション、WordやPDFなどのドキュメントにも埋め込めるWebアイコンフォントのことで商用利用もできます。

FontAwesomeの導入

まずはgemを編集します

gemfile
gem 'font-awesome-rails'

忘れずにbundle installをしましょう

ターミナル
$ bundle install

最後にapplication.scssを編集します

application.scss
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 /*
*/
@import "bootstrap";
//↓　追加
@import "font-awesome";

これで使う準備は整いました。

つかってみよう

リンクを入れたい場所に入れることで使えるようになります。
例えばカレンダーのアイコンを表示させてみます

<i class="fa fa-calendar" aria-hidden="true"></i>

以下のようにカレンダーのアイコンが表示されれば成功です