Awesomeを簡単にrailsで使えることができるようになるgemです。font-awesome-railsを使えるようにしようリンクをコピーしましたまずはGemfileにgemを追加します。installコマンドを実行しましょう。'font-awesome-rails'次に、app/assets/stylesheets/application.cssに下記の記述をします。font-awesomeapplication.cssではなくapplication.scssを使っているときは下記のように記述します。"font-awesome";これで準備は完了です。「font-awesome-rails」は最新版のfont-awesome5には対応していません。font-awesomeのversion5の一部のアイコンが表示されません。version5に対応させたい場合は「font-awesome-sass」というgemを使用します。Awesomeで用意されているアイコンはwebフォントアイコンといいます。Awesomeのアイコンはwebフォントアイコンなので、フォントのように拡大してもそのまま綺麗に表示することができます。cssで色やサイズを指定できるのも特徴です。Awesomeのアイコンはビューファイルで下記のように記述すると表示させることができます。aria-hidden="true"></i>このように記述します。アイコン名は公式サイトで調べることができます。「aria-hidden="true"」はWebアクセシビリティ向上のために記述しています。Webアクセシビリティとはwebサイトが体が不自由な人たちなどにとっても使うことができるのかという定義です。つけなくても表示することはできますが、つけておいたほうが無難です。※ここから下はこの記述を割愛します。公式サイトを確認すると下のように使用できるアイコンの一覧が表示されます。使用したいアイコンをクリックすると下の画像のように書くべきコードを調べることができます。この場合だったら下記のように記述します。fa-clock-o"></i>また下記のように記述するとアイコンの大きさを変えることができます。fa-2x"></i>また下記のように記述することもできます。fa-la"></i>実際に大きさを比べてみましょう。fa-5x"></i>上から順に下のように表示されます。Awesomeではたくさんのアイコンが用意されています。その中でもよく使うアイコンを紹介してみます。clock-oリンクをコピーしました時計のアイコンです。時刻を表したいときなどに使用します。calendarリンクをコピーしましたカレンダーのアイコンです。日時を表したいときなどに使用します。envelope-oリンクをコピーしましたメールのアイコンです。メールアドレスの横などに使用します。folder-oリンクをコピーしましたフォルダのアイコンです。picture-oリンクをコピーしました画像のアイコンです。cogリンクをコピーしました歯車のアイコンです。設定のリンクのときなどに使用します。twitterリンクをコピーしましたツイッターのアイコンです。facebook-officialリンクをコピーしましたfacebookのアイコンです。instagramリンクをコピーしましたinstagramのアイコンです。ヘルパーメソッドを使ってみようリンクをコピーしましたfont-awesome-railsのgemには便利なヘルパーメソッドが用意されています。fa_iconリンクをコピーしましたアイコンの表示の記述を簡単に書くことができるヘルパーメソッドです。下記のように記述します。%>上のコードは下記のコードにコンパイルされます。fa-アイコン名"></i>サイズを指定したい場合は下記のように記述します。%>fa_stacked_iconリンクをコピーしました2つのアイコンを重ねて表示することができるヘルパーメソッドです。%>例えば下記のように記述します。%>「square-o」は下のアイコンです。「twitter」は上で紹介したアイコンですね。上のように記述すると2つのアイコンが重なって下記のようなアイコンが表示されます。上のコードを逆にしてみます。%>すると下記のようなアイコンが表示されます。baseで指定したアイコンが基準になると覚えておきましょう。