폰트 어썸 5 무료 아이콘 사용하기 | HTML / CSS
폰트 어썸은 무료 버전을 사용해도 1600개나 되는 아이콘을 사용할 수 있다.
약 5메가 정도의 웹버전을 다운로드 해도 되고 가입을 하면 cdn 을 사용할 수 있다.
이메일 주소를 확인하고 이름 등 간단한 정보만 입력하면 되니까 가입하는 것도 나쁘지 않다.
웹사이트에 사용하려면 아무래도 가입하거나 설치 버전을 이용하는 것이 좋겠지만 그전에 테스트를 해보고 싶다면 아래 CDNJS 사이트에서 사용해 보는 것도 나쁘지 않다.
폰트 어썸은 현재 6버전이 베타 테스트 하는 중인데 안정화된 최신 버전이 5니까 5를 사용해보자.
*CDN - 폰트어썸 다운로드 : CDN 으로 사용해볼 수 있다.
font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 10% of websites, powered by Cloudflare. We make it faster and easier to load library files on your w
cdnjs.com
* 폰트어썸 웹사이트 : 간단히 회원가입할 수 있다. 프로 버전을 구매하지 않으면 무료다.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
아래 사이트는 무료 아이콘의 정보를 확인할 수 있다. 각 아이콘에 대한 유니코드와 태그를 확인하고 웹페이지에 붙여넣으면 된다.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
먼저 아이콘들을 검색해서 사용하고 싶은 폰트를 정한다.
폰트 어썸은 두가지 방법으로 사용할 수 있다. 유니코드 방식과 i 태그 방식이다.
버전 정보를 보면 5.11.1 이라고 나와있다. CDN을 사용한다면 버전에 따라 호환이 안되는 아이콘도 있으니 확인하고 사용한다.
그럼 사용해보자.
우선 head 태그안에 CDN 을 넣어야 한다. (아래는 공개된 CDN 계정이다)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
먼저 html 파일에서 i 태그로 사용한다.
<p>[폰트 어썸 5 테스트]</p>
<h1>
<i class="far fa-angry"></i>
</h1>
출력이 잘 된다.
CSS에서도 사용해 보자. 유니코드를 사용한다.
/* 폰트어썸5 적용 1단*/
#sidebar ul li:before{
content: "\f35a";
font-family: "Font Awesome 5 Free";
font-size: 1.0em;
}
/* 폰트어썸5 적용 2단*/
#sidebar ul li ul li:before{
content: "\f152";
font-family: "Font Awesome 5 Free";
font-size: 1.0em;
}
/* 폰트어썸5 적용 3단*/
#sidebar ul li ul li ul li:before{
content: "\f101";
font-family: "Font Awesome 5 Free";
font-size: 1.0em;
font-weight: 600;
}
점을 제거한 다음 ul li 태그에 단계적으로 적용해봤다.
주의할 점은 폰트 어썸 5의 경우 어떤 아이콘은 font-weight 를 bold 이상(600)으로 설정해야 표시가 되는 것들이 있으니 주의하도록 한다.
폰트어썸은 지속적으로 아이콘도 개발되고 있고 업데이트가 진행되고 있으니 잘 알아두면 나중에라도 또 유용하게 사용할 수 있을 것 같다.
