소개

Rails 앱 개발에서 placeholder에 Font Awesome의 아이콘을 표시하려고 생각하고 방법을 저것 이것 조사해도 꽤 잘 되지 않고 오온! ? 라고 되었으므로 비망록.

준비

Rails에서 Font Awesome을 사용할 준비.
다음을 Gemfile에 추가 bundle install
Gemfile

gem 'font-awesome-sass'

다음을 application.scss에 추가.

app/assets/stylesheets/application.scss

@import "font-awesome-sprockets";
@import "font-awesome";

이것으로 Font Awesome을 사용할 준비가 완료되었습니다.
다음과 같이 쉽게 Font Awesome을 사용할 수 있습니다. 편리하네요.

<%= icon('fa', 'search', '検索') %>
<%# => <i class="fa fa-search"></i> 検索 %>

↑이런 느낌이 된다.

막상 placeholder에 아이콘 표시

바보이므로 우선 그대로 placeholder에 뿌려 본다.

<%= text_field_tag(:name, nil, placeholder: icon('fa', 'user'))  %>

오온! ? ! ?

해결

뭐 그렇다고 하는 것으로, 올바른 방법을.
Font Awesome 공식 페이지 에서 원하는 아이콘을 찾아 유니코드를 살펴봅니다.

사용자의 아이콘이라고 f007 라고 합니다.

이것을 placeholder 에 이하와 같이 Unicode로서 기술하면 좋다.
그리고 class属性 에 fa 를 지정하지 않으면 반영되지 않기 때문에 주의.
나는 이것을 눈치채지 않고 저것이나 이것과 고민하고 있었다.

<%= text_field_tag(:name, nil, placeholder: "\uf007", class: 'fa')  %>
<%# classの指定を忘れずに！！！！ %>

↑ 좋은 느낌
문자열도 함께 표시하고 싶을 때는 보통 "\uf007 User Name" 처럼 계속 쓰면 됩니다.

참고

Rails5에서 placeholder에 font-awesome icon을 넣고 싶습니다.