Ruby on Rails 【アイコン】Font Awesomeの無料アイコンをカスタマイズする


投稿日:2020年08月28日 (金)
Font Awesomeの無料アイコンを利用するにはレイアウトビューのheadタグに記述を追加する必要があります。

「app/views/layouts/application.html.erb」ファイルに以下の記述を追加します。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">


「app/views/layouts/application.html.erb」ファイルの全文を載せておきます。
<!DOCTYPE html>
<html>
  <head>
    <title>BootTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  </head>

  <body>

    <!-- _navbar.html.erb をレンダーする -->
    <%= render 'shared/navbar' %>

    <!-- toastr -->
    <%= render 'shared/message' %>
    
    <!-- ページをコンテナに格納 -->
    <div class="container">
      <%= yield %>
    </div>

  </body>
</html>



Font Awesomeのサイトで使用したい無料アイコンをクリックするとリンクが表示されますのでそのリンクをコピーしてビューファイルに貼り付けます。




ビューファイルのサンプルのコードを載せておきます。
Bootstrapの記述で書いているので導入していない方は型が崩れるかもしれません。
<br/>
<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">リンゴ</h5>
    <i class="fab fa-apple"></i>
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">アマゾン</h5>
    <i class="fab fa-aws"></i>
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">女性</h5>
    <i class="fas fa-female"></i>
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">男性</h5>
    <i class="fas fa-male"></i>
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">スマホ</h5>
    <i class="fas fa-mobile-alt"></i>
  </div>
</div>



デフォルト表示では大きさが小さく、色も黒です。





大きさを変えるにはclassに以下の記述を追加します。
fa-xs  <!-- 0.75倍 -->
fa-lg  <!-- 1.33倍 -->
fa-2x  <!-- 2倍 -->
fa-3x  <!-- 3倍 -->
fa-4x  <!-- 5倍 -->
fa-5x  <!-- 7倍 -->


サンプルコードを載せておきます。
<br/>
<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">リンゴ</h5>
    <i class="fab fa-apple fa-xs"></i> <!-- 0.75倍 -->
    <i class="fab fa-apple"></i>        <!-- 通常 -->
    <i class="fab fa-apple fa-lg"></i> <!-- 1.33倍 -->
    <i class="fab fa-apple fa-2x"></i>  <!-- 2倍 -->
    <i class="fab fa-apple fa-3x"></i>  <!-- 3倍 -->
    <i class="fab fa-apple fa-4x"></i>  <!-- 5倍 -->
    <i class="fab fa-apple fa-5x"></i>  <!-- 7倍 -->
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">アマゾン</h5>
    <i class="fab fa-aws fa-xs"></i>
    <i class="fab fa-aws"></i>
    <i class="fab fa-aws fa-lg"></i>
    <i class="fab fa-aws fa-2x"></i>
    <i class="fab fa-aws fa-3x"></i>
    <i class="fab fa-aws fa-4x"></i>
    <i class="fab fa-aws fa-5x"></i>
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">女性</h5>
    <i class="fas fa-female fa-xs"></i>
    <i class="fas fa-female"></i>
    <i class="fas fa-female fa-lg"></i>
    <i class="fas fa-female fa-2x"></i>
    <i class="fas fa-female fa-3x"></i>
    <i class="fas fa-female fa-4x"></i>
    <i class="fas fa-female fa-5x"></i>
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">男性</h5>
    <i class="fas fa-male fa-xs"></i>
    <i class="fas fa-male"></i>
    <i class="fas fa-male fa-lg"></i>
    <i class="fas fa-male fa-2x"></i>
    <i class="fas fa-male fa-3x"></i>
    <i class="fas fa-male fa-4x"></i>
    <i class="fas fa-male fa-5x"></i>
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">スマホ</h5>
    <i class="fas fa-mobile-alt fa-xs"></i>
    <i class="fas fa-mobile-alt"></i>
    <i class="fas fa-mobile-alt fa-lg"></i>
    <i class="fas fa-mobile-alt fa-2x"></i>
    <i class="fas fa-mobile-alt fa-3x"></i>
    <i class="fas fa-mobile-alt fa-4x"></i>
    <i class="fas fa-mobile-alt fa-5x"></i>
  </div>
</div>



大きさが変わりました。




次に色を変えます。
色を変えるにはアイコンのクラスに名前をつけてスタイルシートで色を指定します。
class属性に半角スペースで区切り、スタイルの名前をつけます。
サンプルコードを載せておきます。
<style>
    .red{color: red}
    .blue{color: blue}
    .yellow{color: yellow}
    .brown{color: brown}
    .pink{color: pink}
    .purple{color: purple}
    .green{color: green}

</style>

<br/>
<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">リンゴ</h5>
    <i class="fab fa-apple red fa-xs"></i> <!-- 0.75倍 -->
    <i class="fab fa-apple blue red"></i>        <!-- 通常 -->
    <i class="fab fa-apple yellow fa-lg"></i> <!-- 1.33倍 -->
    <i class="fab fa-apple brown fa-2x"></i>  <!-- 2倍 -->
    <i class="fab fa-apple pink fa-3x" ></i>  <!-- 3倍 -->
    <i class="fab fa-apple purple fa-4x"></i>  <!-- 5倍 -->
    <i class="fab fa-apple green fa-5x"></i>  <!-- 7倍 -->
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">アマゾン</h5>
    <i class="fab fa-aws red fa-xs"></i>
    <i class="fab fa-aws blue"></i>
    <i class="fab fa-aws yellow fa-lg"></i>
    <i class="fab fa-aws brown fa-2x"></i>
    <i class="fab fa-aws pink fa-3x"></i>
    <i class="fab fa-aws purple fa-4x"></i>
    <i class="fab fa-aws green fa-5x"></i>
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">女性</h5>
    <i class="fas fa-female red fa-xs"></i>
    <i class="fas fa-female blue"></i>
    <i class="fas fa-female yellow fa-lg"></i>
    <i class="fas fa-female brown fa-2x"></i>
    <i class="fas fa-female pink fa-3x"></i>
    <i class="fas fa-female purple fa-4x"></i>
    <i class="fas fa-female green fa-5x"></i>
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">男性</h5>
    <i class="fas fa-male red fa-xs"></i>
    <i class="fas fa-male blue"></i>
    <i class="fas fa-male yellow fa-lg"></i>
    <i class="fas fa-male brown fa-2x"></i>
    <i class="fas fa-male pink fa-3x"></i>
    <i class="fas fa-male purple fa-4x"></i>
    <i class="fas fa-male green fa-5x"></i>
  </div>
</div>

<div class="card" style="width: 30rem;">
  <div class="card-body">
    <h5 class="card-title">スマホ</h5>
    <i class="fas fa-mobile-alt red fa-xs"></i>
    <i class="fas fa-mobile-alt blue"></i>
    <i class="fas fa-mobile-alt yellow fa-lg"></i>
    <i class="fas fa-mobile-alt brown fa-2x"></i>
    <i class="fas fa-mobile-alt pink fa-3x"></i>
    <i class="fas fa-mobile-alt purple fa-4x"></i>
    <i class="fas fa-mobile-alt green fa-5x"></i>
  </div>
</div>



実際の色の変化を確認してみます。





Rails6.0 Windows MacOSX

動画学習サイトの構築 Rails6.0

  0 (0)

タスク   128

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

民泊サイトの構築 Rails6.0

  0 (0)

タスク   128

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

動画学習サイトの構築 Rails5.0

  0 (0)

タスク   100

1,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

お仕事売買サイトの構築 Rails6.0

  0 (0)

タスク   146

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

民泊サイトの構築 Rails5.0

  0 (0)

タスク   136

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。