Rails에서 FontAwesome 사용

내용

FontAwesome이란?

FontAwesome 사용 준비

FontAwesome을 haml에서

FontAwesome을 버튼으로 사용 (최종 목표)

link

파일 선택

초학자의 복습도 겸한 투고이므로, 실수등 있으면 지적해 주시면 기쁩니다.

FontAwesome이란?

FontAwesome

여기가 공식 페이지입니다.
아이콘을 자유롭게 사용할 수 있습니다! 단번에 사이트가 좋은 느낌이 됩니다.

FontAwesome 사용 준비

도입 방법은 몇 가지가 있습니다만, 이번은 Rails로 사용하므로 gem을 인스톨 합니다.

Gemfile

gem 'font-awesome-sass', '~> 5.4.1'

terminal

bundle install

/assets/stylesheets/application.scss

@import 'font-awesome-sprockets';
@import 'font-awesome';

이것으로 준비 완료입니다.

FontAwesome을 haml로

= fa_icon 'edit'

이제 괜찮습니다.

'edit' 부분은 FontAwesome 페이지에서 사용하려는 아이콘을 찾고,
해당 아이콘 이름을 입력합니다.

개발자 도구로 확인해 보면,

<i class="fa fa-edit"></i>

이런 느낌으로 반영해주고 있습니다.

FontAwesome을 버튼으로 사용

link_to에서 사용

이런 이미지입니다.

펜 아이콘이 새로 만들기 페이지에 링크,
톱니바퀴 아이콘이 편집 페이지로 연결됩니다.

일반 link_to는

= link_to "New", root_path

같은 형태로 제1 인수에 링크의 이름, 제2 인수에 목적지를 쓴다고 생각합니다만,
do를 사용해 블록으로 해 주는 것으로 FontAwesome를 사용할 수 있습니다.

= link_to new_path do
  = fa_icon 'edit'
= link_to edit_path(current_user) do
  = fa_icon 'cog'

(_path 부분은 임시입니다)

들여 쓰기에주의!
(원래 haml에는 do에 대한 end가 불필요하다는 것을 모르고 잠시 고민해 버렸습니다…)

앞서 보여준 것처럼<i class="fa fa-edit"></i>이런 형태가 되기 때문에,

i {
  font-size: 1.3em;
  color: black;
    }

이런 식으로 css를 써주면 스타일을 변경할 수 있습니다.

파일 선택 버튼으로 사용

양식의 가장자리에 있는 사진 아이콘을 누르면 파일 선택 화면이 열립니다.

기본 이미지 선택 버튼 변경

편집의 편의상, 차이 사이트를 참조합니다. 이해하기 어렵고 죄송합니다.


원래는 이런 "파일 선택"버튼이 있다고 생각합니다.
이것을 display:none; 로 보이지 않게 버립니다.

그리고 label 태그를 붙여 거기에 스타일을 대어 줍니다.

haml

.field
  = f.label :image, "ここを押したら画像選択できるよ", class: "label"
  = f.file_field :image, class: "file"

scss

.label {
  cursor: pointer;
  font-size: 16px;
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
}

.file {
  display: none;
} 

이런 느낌이 들었습니다.

참고 : htps : //p 로엔기네 r. 이런 r의 s. 이. jp / 콘텐 t / 코 엠 펭 아츠레 / 7605

FontAwesome으로 바꾸기

여기까지 오면 나머지는 간단합니다.
방금 라벨 태그를 붙인 곳을 do 로 블록으로 해 FontAwesome 로 하는 것 뿐입니다.
(부디도 들여쓰기에 주의!(두번째))

haml

= form_for [@group, @message] do |f|
  = f.label :image, class: "main-form__image" do
    = fa_icon "image"
    = f.file_field :image, class: "main-form__image--default"

scss

.main-form__image {
  cursor: pointer;
  i {
    font-size: 1.3em;
    color: black;
  }
  &--default {
    display: none;
  }
}

이것으로 이런 버튼을 만들 수 있었습니다!

여담

개인적으로 이 구현에 상당히 고민하고 시간을 사용해 버렸습니다만,
왜냐하면 하고 싶은 구현을 분해해 생각할 수 없었기 때문입니다.

검색할 때
"FontAwesomee file 선택"
등, 갑자기 FontAwesome을 file 선택 버튼으로 하는 방법을 조사해 버렸습니다.

하지만, 분해해 생각하면,
1. 기본 선택 버튼 변경
2. 변경한 내용을 FontAwesome으로 바꾸기
라고 하는 순서를 밟게 됩니다.

그래서 검색도
"file 선택 변경"
등으로 하면 단번에 대답에 다가갑니다.

아직 프로그래밍 학습 한 달이지만,
엔지니어 힘은 구구리 힘이라는 것을 실감했습니다.