【rails】font-awesome에서 form에 아이콘을 사용했을 때의 메모

아래 이미지의 "파일 선택"을 카메라 아이콘으로했을 때의 메모입니다!
보충 등이 있으면 부탁합니다_:(´ཀ`」 ∠):

font-awesome(폰트 오삼)를 사용한다!

【font-awesome에의 첫회 인식】
1. awesome을 계속 어웨섬과 읽고 있던 ww(의외로 많다? 많지 않다?)
2. 첫회 rails로 검색했기 때문에 Ruby On Rails용이라고 생각하고 있었다.

검색했을 때에 rails로 검색했기 때문에 rails 전용의 물건이라고 착각하고 있었습니다만, 다르지요? (아마)

aplication.scss에 아래의 항목을 기재하려고 하면 실수로 actiontext.scss에 기술했습니다만 움직였습니다.

actiontext.scss

 $fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

움직이는 것이겠지만 이런 편이 좋다든가 있으면 가르쳐 주시면 다행입니다.
이하도 기재합니다.

javascript>packs>application.js

import '@font-awesome/fontawesome-free/js/all';

font-awesome 사이트에서 무료 등록하기!

제목대로 무료 등록합니다!
무료라도 상당한 아이콘을 사용할 수 있는 것은 고맙네요(´∇｀)

1. 등록이 완료되면 로그인합니다.
2. 「How to Use」의 장소에 있는 「Add Your Kit's Code to a Project」를 확인!
3.『Copy Kit Code!』에서 복사하여 붙여넣습니다!

application.html.erb

<script src="https://kit.fontawesome.com/2f8d319b58.js" crossorigin="anonymous"></script>

이것으로 준비 완료입니다(o^^o)

아이콘을 사용합시다!

그럼 아이콘을 씁니다!


조금 보기 어려울지도 모르지만 코드는 이미지 바로 위에 있습니다.

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

이 설명으로 아이콘을 설치할 수 있습니다.
그리고는 css로 외형을 정돈하면 우선 완성입니다.

하지만 이 아이콘을 클릭하면 움직이게 하고 싶네요?

form 객체의 file_field에 아이콘을 붙이고 싶다!

여기에서 개인적으로 어떻게 할까라고 계속 머리를 괴롭혔습니다ww

최종적으로는 다음과 같이 되었습니다(´∇｀)

 <%= f.label :image, class:"form-image-label" do %>
   <i class="fas fa-camera"></i>
     <%= f.file_field :image, class:"message-hidden" %>
 <% end %>

1. <%= f.label ~ do%>로 블록을 만듭니다.
2. 그 안에 아이콘의 html과 file_field를 써주면 완성! !

label의 사용법, 블록의 사용법을 잘 알지 못했기 때문에 오랫동안 고전했습니다만 잘 움직여 주어서 좋았습니다! !

내용적으로 이해 부족, 잡종 등 있다고 생각합니다만 메모장 대신이지만 본 분은 용서해 주세요.