개요
이미지 찾아서 넣기는 귀찮고 html 코드만으로 아이콘을 사용하고 싶을 때, 도움이 되는 것이 바로 폰트 어썸이다.
폰트 어썸에서 제공하는 css 파일을 CDN 으로 간편하게 웹사이트에 추가할 수 있다.
추가 방법
폰트 어썸 CDN 우선 이 링크로 가서 버전을 선택하고 제일 위의 all.min.css 링크를 복사한다. 필요한게 분명히 정해져있으면 all 대신 다른걸 선택해도 된다.
1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
헤더에 link 태그를 작성후 href 에 아까 복사한 cdn 주소를 붙여넣는다.
폰트 어썸 해당 사이트로 이동하여 검색창에 아이콘 이름을 검색 후 내가 선택한 CDN 버전으로 필터를 걸어준다.
아이콘을 선택하면 html 코드를 볼 수 있다.
1
<i class="fas fa-users"></i>
이런식으로 나오는데, 이걸 그대로 복사 붙여넣기하면 화면에 출력되는 것을 확인할 수 있다.
버전은 5 버전이나 4 버전을 추천한다.
5 버전 아이콘은 모두 fas 클래스에 속해있고, 4 버전 아이콘은 모두 fa 클래스에 속해있다.
1
2
3
4
5
6
*:not(.fas) {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui;
}
그래서 위 처럼 모든 요소에 스타일을 적용할 때, 폰트어썸만 일괄적으로 제외시킬 수 있다.
제외시키는 이유는 font-family 가 적절하지 않으면 아이콘이 깨져나오기 때문이다.