【民泊5.1】【Windows】アイコン

以下のサイトのアイコンを使用します。
fontawesome.com

ベーシックアイコンは「headタグ」に「link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"」の記述を追加すれば利用できます。
詳しくは以下を御覧ください。
www.w3schools.com

記述追加　app\views\layouts\application.html.erb(11行目)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

app\views\layouts\application.html.erb

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

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- googleフォント -->
    <link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet">
    <!-- アイコン　-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body>

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

    <!-- ページをコンテナに格納　-->
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

アイコンの記述　app\views\photos\_photos_list.html.erb（14行目）

<i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>

更新　app\views\photos\_photos_list.html.erb
記述をまるごとコピーして置き換えてください。

<% if @photos.count > 0 %>
  <br/><br/>

  <div class="row">
    <% @photos.each do |photo| %>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading preview">
            <%= image_tag photo.image.url() %>
          </div>
          <div class="panel-body">
            <span class="pull-right">
              <%= link_to room_photo_path(photo.room_id, photo), remote: true, method: :delete, data: {confirm: "Are you sure?"} do %>
                <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
              <% end %>
            </span>
          </div>
        </div>
      </div>
    <% end %>
  </div>
<% end %>

更新　app\views\rooms\photo_upload.html.erb
記述をまるごとコピーして置き換えてください。

<div class="row">
  <div class="col-md-3">
    <%= render 'room_menu' %>
  </div>
  <div class="col-md-9">
    <div class="panel panel-default">

      <div class="panel-heading">
        お写真
      </div>

      <div class="panel-body">
        <div class="container">
          <div class="row">
            <div class="col-md-offset-3 col-md-6">
              <!-- 写真をアップロードの記述 -->

              <%= form_for @room, url: room_photos_path(@room), method: 'post', html: {multipart: true} do |f| %>
                <div class="row">
                  <div class="form-group">
                    <span class="btn btn-default btn-file text-babu">
                      <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                      写真を選択
                      <%= file_field_tag "images[]", type: :file, multiple: true %>
                    </span>
                  </div>
                </div>

                <div class="text-center">
                  <%= f.submit "写真追加", class: "btn btn-normal" %>
                </div>

              <% end %>

            </div>
          </div>
          <div id="photos"><%= render 'photos/photos_list' %></div>

        </div>
      </div>
    </div>
  </div>
</div>

「app\views\rooms\_room_menu.html.erb」ファイルの編集をします。

１．記述追加　app\views\rooms\_room_menu.html.erb(20行目)

    <% if !@room.photos.blank? %>
      <span id="photo_check" class="pull-right text-babu"><i class="fa fa-check"></i></span>
    <% end %>

２．37行目を以下の記述に変更しています。
「 && !@room.photos.blank?」の記述を追加しています。

<% is_ready = !@room.active && !@room.price.blank? && !@room.listing_name.blank? && !@room.photos.blank? && !@room.address.blank? %>

app\views\rooms\_room_menu.html.erb

<ul class="sidebar-list">
  <li class="sidebar-item">
    <%= link_to "お部屋の概要", listing_room_path, class: "sidebar-link active" %>
    <span class="pull-right text-babu"><i class="fa fa-check"></i></span>
  </li>
  <li class="sidebar-item">
    <%= link_to "１泊の宿泊価格", pricing_room_path, class: "sidebar-link active" %>
    <% if !@room.price.blank? %>
      <span class="pull-right text-babu"><i class="fa fa-check"></i></span>
    <% end %>
  </li>
  <li class="sidebar-item">
    <%= link_to "お部屋の名前と説明", description_room_path, class: "sidebar-link active" %>
    <% if !@room.listing_name.blank? %>
      <span class="pull-right text-babu"><i class="fa fa-check"></i></span>
    <% end %>
  </li>
  <li class="sidebar-item">
    <%= link_to "お部屋の写真", photo_upload_room_path, class: "sidebar-link active" %>
    <% if !@room.photos.blank? %>
      <span id="photo_check" class="pull-right text-babu"><i class="fa fa-check"></i></span>
    <% end %>
  </li>
  <li class="sidebar-item">
    <%= link_to "付属設備", amenities_room_path, class: "sidebar-link active" %>
    <span class="pull-right text-babu"><i class="fa fa-check"></i></span>
  </li>
  <li class="sidebar-item">
    <%= link_to "お部屋の住所", location_room_path, class: "sidebar-link active" %>
    <% if !@room.address.blank? %>
      <span class="pull-right text-babu"><i class="fa fa-check"></i></span>
    <% end %>
  </li>
</ul>
<hr/>

<% is_ready = !@room.active && !@room.price.blank? && !@room.listing_name.blank? && !@room.photos.blank? && !@room.address.blank? %>

<%= form_for @room do |f| %>
  <%= f.hidden_field :active, value: true %>
  <%= f.submit "公開する", id: "publish_button", class: "btn btn-normal btn-block", disabled: !is_ready %>
<% end %>