- Font Awesome의 장점
1) Html Font 속성이 모두 사용 가능하다.
font awesome은 이미지가 아닌 폰트이기 때문에 HTML의 font style을 적용할 수 있다는 것이 아주 큰 장점이다. 그래서 간단하게 소스 몇줄만 추가해주면 크기도 늘릴 수 있고 색상도 변경할 수 있다.
2) CSS 적용시킬 수 있다.
일반적으로 크기나 색상, 그림자 효과 등을 적용시켜 사용합니다.
3) 브라우저 호환성 문제가 적다.
- Font Awesome 사용법
1) CDN 선언
폰트어썸 홈페이지에서 싸인업 후 이메일 인증을 하면 홈페이지에 CDN 주소를 받을 수 있다. 그리고 원하는 아이콘의 코드를 복사해서 html의 원하는 위치에 붙여 넣기 한다.
예를 들면
<head>
<script src="https://kit.fontawesome.com/8cc10ba7fd.js" crossorigin="anonymous"></script>
</head>
위 주소를 헤드 부분에 삽입한다.
<body>
<i class="fab fa-free-code-camp"></i>
</body>#추가 사용 팁
- refresh 아이콘을 넣으면 저절로 페이지가 refresh 됩니다. wow!! 하지만 추후에 css를 적용하거나 js 코드를 작성할 경우 이 기능이 사라지기도 하니 주의 바랍니다.
- 사이즈는 일반 폰트 크기처럼 를 이용하여 크기를 조절하거나, "fa-lg"또는 "fa-몇 배 x"라고 작성하면 됩니다. (위의 예시를 기준으로) 처럼 원하는 크기를 작성하면 됩니다.
- 'fas'와 'far'의 차이는 's'는 'solid'의 의미로 채워진 것을 의미하고, 'r'는 'regular'의 의미로 안이 채워져 있지 않고 outline만 있는 것을 의미합니다.
출처: https://saeatechnote.tistory.com/entry/HTML-fontawesome연결하기 [새아의 테크노트]
싱글벙글