Haml에서 font-awesome에 링크를 붙이는 방법

rails에서 haml을 이용해 마크업을 진행하고 있을 때, font-awesome을 사용하는데 조금 집착했으므로 써 둡니다.

font-awesome이란?

웹상에서 자주 사용되는 아이콘을 이미지가 아닌 텍스트로 표시할 수 있도록 해주는 기능입니다.
rails에서는 gem으로 설치할 수 있습니다.

haml이란?

HTML/XHTML을 생성하기 위한 마크업 언어로, 매우 간단하게 기술할 수 있습니다.

절차 확인

gem 설치

Gemfile에 다음과 같은 설명을 합니다.

Gemfile.rb

gem "font-awesome-rails"

터미널에 bundle install 합니다.

haml 설치

이쪽도 Gemfile에 기술합니다.

Gemfile.rb

gem 'haml-rails'
gem 'erb2haml'

터미널에 bundle install 합니다.

erb 파일을 haml로 변환

gem 'erb2haml' 의 젬이 확실히 인스톨 되어 있으면, rake -T 커멘드로 다음과 같은 표시가 됩니다.

terminal

rake haml:convert_erbs                  # Perform bulk conversion of all html.erb files to Haml in views folder
rake haml:erb2haml                      # Convert html.erb to html.haml each file in app/views
rake haml:replace_erbs                  # Perform bulk conversion of all html.erb files to Haml in views folder, then remove the converted html.erb files

따라서 rake haml:replace_erbs를 입력합니다.
그러면 현재 디렉토리 아래의 erb 파일을 모두 haml 파일로 변환합니다.

haml 파일에서 font-awesome을 사용하여 보기

ht tp // //후타타우우소메. 이오 / 이콘 s /
위 URL에서 사용할 아이콘을 클릭합니다.

위 이미지와 같은 <i...></i> 태그를 복사합니다.
일반 HTML 파일에서는 이 i 태그를 통째로 복사하기만 하면 됩니다.
haml로 작성할 때는 다음과 같습니다.

sample.html.haml

%i.fa.fa-cog

link_to 내에서 사용해보기

haml에서 ruby를 작성할 때 다음 두 가지 기술이 있습니다.
보기에서 표시하지 않으려면 '-' 사용

sample.html.haml

- if
- @posts.each

표시하려면 '=' 사용

sample.html.haml

= post.title

link_to에는 '='을 적용합니다.

sample.html.haml

= link_to 表示する文言, URLパス, メソッド, クラス

이렇게 쓰지만 다음과 같이 쓰더라도 오류가 발생합니다.

index.html.haml

= link_to edit_user_registration_path .fa.fa-cog
= link_to edit_user_registration_path i.fa.fa-cog

콘텐츠 태그를 사용하는 방법도 있는 것 같습니다만, 아래와 같이 쓰면 코드도 깔끔하고, 정상적으로 표시도 됩니다.

index.html.haml

= link_to edit_user_registration_path do
  %i.fa.fa-cog

중첩시켜 쓰지 않고 상당한 시간은 빠져 있었으므로, 참고까지.

참고 자료

link_to 정보
h tp : // 우데 my. 베네세. 이. jp / 로 ゔ ぉ p 면 t / ぃ k-와. HTML
font awesome 정보
htp : // 우니 v. 페라이치. 코m/39