Rails5でplaceholderにfont-awesomeのiconをいれたい

Question

現在ruby2.4.0、rails5で

	<%= form_tag pages_search_path, :method => 'get' do %>
	  <div class="input-group">
	  	<%= text_field_tag :search, params[:search], class: 'form-control font-awesome', placeholder: '&#xF002 ruby',id: "inlineFormInputGroup2" %>
	  	<%= submit_tag "検索",class: 'input-group-addon search_button' %>
	  </div>
	<% end %>

.font-awesome{
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

と書いています。本来なら表示がされると思うのですが、
なぜか表示がされません。

書き方はあっていると認識していており、表示がされない理由とその解決策を教えていただけると幸いです。
そのほか必要な情報があれば、追記していきますので質問、回答をお願いいたします。

Comments

[gouf]

質問タグ、Rails のタグが抜けているので追加をお願いします

Answer 1

Font Awesome などの、アイコンを文字として表示するライブラリは、そのデータの実体としてUnicode 文字が使用されています

それぞれ、HTML 周りでは &, ; でのセット、Ruby 周りでは先頭に \u を付けて指定する、という違いがあります

そのため、「HTML 側のルール」を「Ruby 側のルール」で解釈した場合に、単なる文字列として処理されてしまっているのかもしれません

Ruby 側で利用する際には、参照指定を  → \uF002 と読み替える必要がありそうです

<%= text_field_tag :search, params[:search], class: 'form-control fa', placeholder: "\uF002" %>

試したこと

Font Awesome のアイコン文字を表示できた例:

• レンダリングエンジン側(Slim)で出力(クラス名指定、参照文字記述)

p.fa 

•  をRuby 側の参照ルールに合わせる、それを直接出力(クラス名指定)

p.fa = "\uF002"

•  をRuby 側の参照ルールに合わせる、オプションでそれを指定(クラス名指定, Rails のタグ生成メソッド)

= content_tag(:input, '', class: 'form-control empty', placeholder: "\uF002" + 'foo bar')
= text_field_tag :search, params[:search], class: 'form-control fa', placeholder: "\uF002

•  が参照している文字の実体をオプションに直接貼り付け(クラス名指定、Rails のタグ生成メソッド)

= text_field_tag :search, params[:search], class: 'form-control fa', placeholder: ''

•  が参照している文字の実体を直接貼り付け、レンダリングエンジン(Slim)に出力させる(クラス名指定)

p.fa 

---

かなり泥臭い調べ方をしてしまいましたが、何か参考になれば幸いです

Links

• Font Awesome Cheatsheet
• fa-search: Font Awesome Icons
• Use Font Awesome Icon in Placeholder - Stack Overflow

Comments

[hatsu]

gouf様
ご回答ありがとうございます。
<%= text_field_tag :search, params[:search], class: 'form-control font-awesome fa', placeholder: "\uF002 ruby",id: "inlineFormInputGroup2" %>
と、
&#x→\uとし、シングルクオテーションからダブルクオテーションに変更することでserachiconが正しく表示されました。
ずっとつまづいていたので、大変ありがたいです。
誠にありがとうございました。