railsでFont Awesomeを導入し、link_toで使用する方法

【Ruby on Rails】Font Awesomeをlink_toで使おう!

こんにちは!Masaです!

今回は、railsにFont Awesomeを導入し、link_toで使う方法を書き残しておきます。

Font Awesomeとは?

Font Awesomeとは、アイコンを画像ではなく文字として扱うことができるツールです。

文字として認識してくれるため、文字色やフォントサイズの変更が容易となる便利なツールです。

そのFont Awesomeをrailsに導入していきます。

railsへの導入方法

railsへの導入は、gemを通じて行うことができます。

まず、Font AwesomeのGemを追加します。

Gemfileに、

を追記します。

次に、application.cssにて、

と追記します。

これで、準備が整いました。

htmlのクラス指定で、以下のように使うことができます。

link_toで使う方法

せっかくrailsに導入したのですから、「link_to」でFont Awesomeを使う方法をご紹介しておきます。

link_toのブロックを生成して、Font Awesomeを組み込んでいきます。

例えば、新規登録のリンクにFont Awesomeを使用したい場合だと、

このように書きます。

「do」によってブロックを生成しています。簡単に使えますね!

これを使えば、GETだけでなく、POSTやDELETEのリクエストへのリンクにも、Font Awesomeを使用することができるため、便利です。

グローバルナビのリンクに、賑やかしでFont Awesomeをつけたりすると、見た目が良くなったりするかもしれませんね!

まとめ

アイコンを文字として認識してくれるFont Awesomeは、何かと重宝するツールかと思います。

個人的には、賑やかしとして随所に使わせてもらっています。

ぜひ、ご活用ください。

それでは、今回は以上です!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする