学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Ruby on Rails | Font Awesomeの利用

↓↓クリックして頂けると励みになります。



fontawesome.com


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」を利用可能になります。

アイコンの利用
アイコンの利用




↓↓クリックして頂けると励みになります。

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)