読者です 読者をやめる 読者になる 読者になる

人生のヒント

私が経験したことが、誰かの人生のヒントになればと願い書きます。

Ruby On Railsでおしゃれなアイコン(Font-Awesome)を表示させる

RubyOnRails おしゃれなアイコン Font Awesome
スポンサーリンク

f:id:hinthint:20160905161754p:plain

 

今回は、Ruby On Railsでおしゃれなアイコン(Font-Awesome)を使いたいと思います。

以下の画像のようなアイコンを使うことができます。

f:id:hinthint:20160905163117p:plain

 

下記サイトにFont-AwesomeのGemの導入手順が書いてあります。

http://qiita.com/succi0303/items/7f76d53ebe54dab41124

 

サーバは、いつもの通りrootでログインします。

 

1.インストール

# su - rails

$ cd work/foo

$ vi Gemfile

 

Gemfileに以下記述を記入します。

gem 'font-awesome-rails'

 

以下コマンドを実行します。

$ bundle install

$ vi app/assets/stylesheets/application.css

 

app/assets/stylesheets/application.cssに以下記述を記入します。

/*
 *= require font-awesome
 */

 

以下コマンドを実行します。

$ rake assets:clobber

$ rake assets:precompile

 

 

2.フォントを使ってみる

viewのファイルにタグを記載します。

以下コマンドを実行します。

$ vi app/views/users/index.html.erb

app/views/users/index.html.erbの「<h1>Listing Users</h1>」の配下に以下タグの記述を記入します。

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

 以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

該当ページを見ると、こんな感じに見えます。

f:id:hinthint:20160905165842p:plain

 

記述するタグは、下記サイトで確認できます。

http://fontawesome.io/icons/