마지막 업데이트 : 2021년 03월 31일
조회수 : 

::before ::after에 fontawesome을 적용하는 방법

1. FA CDN 주소 가져오기 https://fontawesome.com/account/cdnFA 홈페이지에 접속해서 CDN 주소를 가져와서 적용할 페이지에 삽입합니다. (안해되 되는 지 테스트중)또는, FontAwesome 플러그인을 활성화합니다. 2. 필요한 FA Icon 찾기 https://fontawesome.com/icons?d=gallery&m=freeFA 홈페이지에서 필요한 아이콘을 […]
Written by: doogak
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

1. FA CDN 주소 가져오기

https://fontawesome.com/account/cdnFA 홈페이지에 접속해서 CDN 주소를 가져와서 적용할 페이지에 삽입합니다. (안해되 되는 지 테스트중)
또는, FontAwesome 플러그인을 활성화합니다.

2. 필요한 FA Icon 찾기

https://fontawesome.com/icons?d=gallery&m=freeFA 홈페이지에서 필요한 아이콘을 검색합니다.
이때 필요한 것은 2가지 입니다.
1) 아이콘이 3가지 스타일 중 어떤 스타일인지
2) 아이콘 코드번호

3. 적용하기

가상요소에는 늘 content라고 하는 스타일이 들어갑니다. 말 그대로 컨텐츠를 넣는 공간으로 큰 따옴표 안에 내용을 삽입해야 합니다. 따라서 FA 코드앞에  (역슬래쉬, 원화로 표시됨)를 붙여서 content안에 입력합니다.

여기에 더하여 font-family와 font-weight를 작성해 주어야 하는데, font-family는 무조건;
font-family: "Font Awesome 5 Free";
이라고 입력합니다.

font-weight는 FA font의 스타일을 말하는데, Solid(fas), Regular(far), Light(fal) 이렇게 3가지 타입이 있습니다. 각각 font-weight를 900, 400, 300으로 적용해야 합니다.

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기
power-switchmagnifiercross