이번에는 "fontawesome"을 html에 연결하는 법을 알아보겠습니다.
1. 구글 검색창에 "fontawesome"을 검색하거나 https://fontawesome.com/ 에 접속합니다.
2. "Starting Using Free"를 클릭합니다 (무료로 이용 가능하죠)
3. 이렇게 생긴 페이지가 나오면 작성된 <link> 코드 전체를 복사합니다.
(혹은) 오른쪽 아래 아이콘을 누르면 저절로 복사됩니다.
4. 복사한 링크를 "html"파일 <head> 부분에 붙여 넣기 합니다.
#SVG의 경우 좀 더 icon 관련하여 자세한 부분까지 컨트롤할 수 있는 기능이 있으며 개인적으로 설정해야 하고 렌더링 과정이 필요한 부분이라 "Webfont"부분을 이용하시는 것이 좋습니다. 혹 더 자세한 내용이 궁금하시다면 SVG우측의 "?"부분을 클릭하시면 webfont와 SVG의 각각의 특성과 차이점이 나와있습니다.
5. 검색창에 원하는 아이콘을 검색합니다.
6. 검색 후 좌측에 보면 "Free"부분을 클릭하면 무료 아이콘만 볼 수 있습니다.
7. 원하는 아이콘을 클릭합니다.
8. 동그라미 친 부분 <i> 코드를 그대로 복사합니다. (클릭하면 저절로 복사됩니다)
일반적으로 아이콘 밑에 있는 것이 코드 class name이 됩니다. 원리를 알고 있다면 굳이 찾지 않아도 바로 입력하여 아이콘을 적용할 수 있습니다.
9. 작성 중인 html 파일의 원하는 위치에 붙여 넣기 합니다.
#추가 사용 팁
- refresh 아이콘을 넣으면 저절로 페이지가 refresh 됩니다. wow!! 하지만 추후에 css를 적용하거나 js 코드를 작성할 경우 이 기능이 사라지기도 하니 주의 바랍니다.
- 사이즈는 일반 폰트 크기처럼 <font-size>를 이용하여 크기를 조절하거나, "fa-lg"또는 "fa-몇 배 x"라고 작성하면 됩니다. (위의 예시를 기준으로) <i class="fas fa-redo-alt fa-lg / fa-2x / fa-3x / fa-4x>처럼 원하는 크기를 작성하면 됩니다.
- 'fas'와 'far'의 차이는 's'는 'solid'의 의미로 채워진 것을 의미하고, 'r'는 'regular'의 의미로 안이 채워져 있지 않고 outline만 있는 것을 의미합니다.
이용하다 보면 영어 단어도 공부(?)되고 시각적으로 아이콘이 매우 많이 사용되기 때문에 기본적으로 꼭 알아두셔야 할 기능입니다.
이 정보가 많은 도움이 되었으면 좋겠습니다.
혹 잘못된 정보가 있거나 궁금하신 사항이 있다면 댓글로 남겨주시길 바랍니다.
'프로젝트 기록 > To do list' 카테고리의 다른 글
| HTML - WAI-ARIA (0) | 2019.05.14 |
|---|---|
| HTML - input type (0) | 2019.05.13 |
| HTML에 CSS파일 적용하기 그리고 @import (0) | 2019.05.10 |
| to do list 만들기 (0) | 2019.05.09 |
| To do list in Javascript for beginners (0) | 2019.05.08 |
