↓↓クリックして頂けると励みになります。
Ruby on RailsでFont Awesomeを利用するためには、以下のステップを実行します。
Font Awesomeはアイコンフォントセットであり、アプリケーション内でアイコンを使用するのに役立ちます。
今回は、gemを追加する方法を紹介します。
Font Awesomeを使用するには、まずGemをインストールします。
font-awesome-sassというGemがあり、これを使ってFont Awesomeを簡単に導入できます。
Gemfileに以下の行を追加し、bundle installを実行します。
gem 'font-awesome-sass'
Font Awesomeのスタイルシートをアセットパイプラインに含めるために、「app/javascript/stylesheets/application.scss」ファイルに以下のような行を追加します。
@import 'font-awesome-sprockets'; @import 'font-awesome';
これにより、Font Awesomeのスタイルがアプリケーション内で利用可能になります。
Font Awesomeのアイコンは、HTML要素内でクラスを指定して利用できます。
<i class="fa fa-user"></i> ユーザー
上記の例では、faクラスはFont Awesomeアイコンフォントを示し、fa-userクラスはユーザーアイコンを指定しています。アイコンの種類に応じてクラス名を変更できます。
これで、Ruby on Railsアプリケーション内でFont Awesomeを利用できます。アプリケーションのデザインに合わせてアイコンを選んで表示できます。
Bootstrapを利用している場合、この方法ではBootstrapを利用できなくなります。
Bootstrapを利用している場合は、下記の方法でFont Awesomeを導入します。
まずサインアップしてアカウントを作成します。
セットアップリンクを作成します。
表示されるリンクをコピーして、「app/views/layouts/application.html.erb」ファイルのheadタグにコピーします。
これでfontawesomeのバージョン「6」を利用可能になります。
↓↓クリックして頂けると励みになります。
