위의 이미지들은 사실 이미지가 아닌 폰트어썸이라는 폰트(서체)입니다. 이번 포스트에서는 폰트 어썸을 사용하는 방법에 대해서 간단히 소개하도록 하겠습니다.
목차
1. Font Awesome 폰트 어썸 이란
2. Font Awesome 을 사용하는 방법
3. Font Awesome 을 로드하는 세가지 방법
4. Font Awesome 을 포스트에 넣는 방법
5. Font Awesome 을 스타일링 하는 방법
1. Font Awesome 폰트 어썸 이란
폰트 어썸은 아이콘으로 이루어진 폰트(글꼴, 서체)입니다. 글꼴이기 때문에, 크기 및 색상 등 모든 CSS로 변경이 가능하며 확대를 해도 깨지거나 하지 않습니다. 물론 무료입니다. 개발사인 Font Awesome 에 따르면 1억개 이상의 사이트가 폰트어썸을 사용하고 있다고 합니다.
폰트 어썸을 사용하면, 단순한 아이콘 뿐만이 아니라, 위와 같이 다양한 아이콘을 서체와 같이 사용할 수 있습니다. 폰트 어썸은 기사 작성 시점에서 964개의 아이콘을 무료로 사용할 수 있으며, 1000개 이상의 아이콘을 유료로 제공하고 있습니다.
2. Font Awesome 폰트 어썸을 사용하는 방법
1. 헤드태그안에 외부 주소를 넣어 로드 후 사용하는 방법
사용법은 웹 폰트와 같이 로드후에 사용하는 방법으로 가장 일반적인 방법입니다.
2. 아이콘의 편집 등을 위해 다운로드하여 사용하는 방법
백터로 되어 있는 아이콘을 편집하여 사용하고 싶을 때는, 다운로드하여 사용하면 됩니다. 상업적으로도 사용할 수 있으며 무료입니다.
3. Font Awesome 폰트 어썸을 로드하여 사용하는 방법
웹폰트와 같이 사용할 웹사이트의 헤드태그 안에 로드하여 사용하는 방법은 일반적으로 아래의 세 가지 방법이 있습니다.
1. [티스토리] 티스토리처럼 스킨편집 기능이 있는경우 아래의 링크를 헤드태그 안에 입력해 주면, 폰트 어썸을 간단히 사용할 수 있습니다.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2. [워드프레스] 워드프레스의 경우는, 외모>>테마편집기 로 이동해서 header.php 파일에 위의 링크를 삽입하는 방법입니다.
4. Font Awesome 을 포스트에 넣는 방법
다음은 폰트어썸을 포스트에 넣는 방법입니다. 먼저 아래의 링크에서 사용할 아이콘을 찾습니다.
https://fontawesome.bootstrapcheatsheets.com/#
그리고 사용할 아이콘 밑의 Copy 를 클릭하고, HTML을 선택하여 삽입합니다.
5. Font Awesome 을 스타일링하는 방법
폰트(글꼴=서체)이므로 html 이나 css로 스타일링을 할 수 있습니다.
크기변경
<i class="fa fa-github-alt fa-xs">fa-xs</i> <i class="fa fa-github-alt fa-sm">fa-sm</i> <i class="fa fa-github-alt fa-lg">fa-lg</i> <i class="fa fa-github-alt fa-2x">fa-2x</i> <i class="fa fa-github-alt fa-3x">fa-3x</i> <i class="fa fa-github-alt fa-5x">fa-5x</i>
<i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-arrow-circle-o-up fa-spin"></i> <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i>