LoginSignup
auk63299
@auk63299 (ねりお ねり)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

RailsでFontAwesomeのアイコンを入力フォーム内に表示したい

解決したいこと

RailsでFontAwesomeのアイコンを入力フォーム内の左に表示させたいのですが、上手く表示できません。何度やっても入力フォームの外側にしかアイコンを表示できません。コードの書き方を教えていただけますでしょうか。

該当するソースコード

ソースコードを入力
```<div class="container mt-5">
  <div class="row">
    <div class="col-6 mx-auto">
    <h2>Log in</h2>

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="form-group">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email", :placeholder => "email", class: "input", class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :password %><br />
    <%= f.password_field :password, autocomplete: "current-password", :placeholder => "password", class: "input", class: "form-control" %>
  </div>

  <% if devise_mapping.rememberable? %>
    <div class="field">
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me %>
    </div>
  <% end %>

  <div>
    <%= f.submit "Log in", class: "btn btn-primary" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
    </div>
    </div>
    </div>

例)

<i class="fas fa-user"></i>
このアイコンを表示させたいです。

### 自分で試したこと
何時間もかけて調べましたが自分で解決できませんでした。ご教授願います。
0

1Answer

入力フォーム内の左に表示、というのは以下のようなイメージでしょうか。

image.png

FontAwesome のアイコンタグと入力フォームのinputタグを並列にしておいて、FontAwesomeのアイコンタグを absolute などで位置調整すればよいと思います。

0

Comments

  1. @auk63299

    Questioner
    お返事ありがとうございます!キータは返事もらっても通知がないんですね!いままで全く気づきませんでした↓
    今から試してみます!ありがとうございます!!

Your answer might help someone💌