Rails – 掲示板 – アイコンの導入

1 概要
2 読み込みスクリプトの記述
3 アイコンタグの記述
4 スタイルの設定

概要

これまでメニューには「投稿」や「サインアウト」といった文字列を表示していたが、ここでこれらをアイコンに変更する。

アイコンはCDNで提供されるものもあり、ここではFont Awesomeを利用する。

読み込みスクリプトの記述

ヘッダーメニューの共通レイアウト、application.html.erbのheadセクションに、Font Awesomeのアイコンを使うためのJavaScriptを読み込むタグを記述する。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>ExBbs</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- Font Awesomeを使うためのスクリプト -->
    <script src="https://kit.fontawesome.com/08c0548ff0.js" crossorigin="anonymous"></script>
  </head>

  .....

</html>

<!DOCTYPE html>

<html>

<head>

<title>ExBbs</title>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>

.....

</html>

アイコンタグの記述

Font Awesomeのアイコンは、iタグのクラスでアイコンの種類を指定して表示させる。アイコンごとのクラス表現を含むタグは、サイトでアイコンを選択するとコピーできる。

<i class="fas fa-home"></i>

1	<i class="fas fa-home"></i>

また、Railsのlink_toヘルパーでアイコンをクリックしたときのリンク先を指定する場合、以下の様にdoブロックで囲む。

<%= link_to(top_path) do %>
  <i class="fas fa-home"></i>
<% end %>

<%= link_to(top_path) do %>

<% end %>

また、ここでは以下の2つを追加している。

アイコンのスタイルを設定するクラスを追加
マウスオーバー時に表示されるtitleを追加

<i class="fas fa-home icon" title="トップページ"></i>

1	<i class="fas fa-home icon" title="トップページ"></i>

こうしてヘッダーメニューを変更したのが以下の内容。

<!DOCTYPE html>
<html>

  .....

  <body>
    <header>
      <%= link_to(top_path) do %>
        <div class="header_logo"></div>
      <% end %>
      <h1>EX-BBS</h1>
      <p><%= user_in_session.name %>さん</p>
      <ul class="header_menu">
        <!-- トップページへのリンク -->
        <li>
          <%= link_to(top_path) do %>
            <i class="fas fa-home icon" title="トップページ"></i>
          <% end %>
        </li>
        <!-- 投稿ページへのリンク -->
        <li>
          <%= link_to("#") do %>
            <i class="fas fa-arrow-circle-up icon" title="記事投稿"></i>
          <% end %>
        </li>
        <!-- プロフィールページへのリンク -->
        <li>
          <%= link_to(profile_path(user_in_session)) do %>
            <i class="fas fa-user-alt icon" title="プロフィール"></i>
          <% end %>
        </li>
        <!-- サインアウト -->
        <li>
          <%= link_to(sign_out_path) do %>
            <i class="fa fa-sign-out-alt icon" title="サインアウト"></i>
          <% end %>
        </li>
      </ul>
    </header>

    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

<%= link_to(top_path) do %>

<% end %>

<li>

<%= link_to(top_path) do %>

<% end %>

</li>

<li>

<%= link_to("#") do %>

<% end %>

</li>

<li>

<%= link_to(profile_path(user_in_session)) do %>

<% end %>

</li>

<li>

<%= link_to(sign_out_path) do %>

<% end %>

</li>

</ul>

</header>

<%= yield %>

</body>

</html>

スタイルの設定

アイコンタグのクラスにスタイルを適用するため、SCSSファイルを編集する。

アイコンの間に線を引くための&+liブロックを削除し、.iconブロックを追加してサイズ色を設定している。

app/assets/stylesheets/header.css

  .header_menu {
    display: flex;
    list-style: none;

    & li {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0px 10px 5px;
      width: 50px;//100px;
      font-size: 14px;
      color: var(--title-color);

      & a {
        text-decoration: none;
        color: var(--title-color);
      }

      .icon {
        font-size: 30px;
        color: #0af;
      }
    }
  }

.header_menu {

display: flex;

list-style: none;

& li {

display: flex;

align-items: center;

justify-content: center;

margin: 10px 0px 10px 5px;

width: 50px;//100px;

font-size: 14px;

color: var(--title-color);

& a {

text-decoration: none;

color: var(--title-color);

}

.icon {

font-size: 30px;

color: #0af;

}

TauStation

Rails – 掲示板 – アイコンの導入

概要

読み込みスクリプトの記述

アイコンタグの記述

スタイルの設定

コメントを残すコメントをキャンセル

概要

読み込みスクリプトの記述

アイコンタグの記述

スタイルの設定

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル