티스토리 뷰
개요
폰트어썸(fontawesome)은 개발자, 디자이너, 기획자를 위한 유/무료 아이콘을 제공하는 라이브러리입니다. 사용법이 어렵지는 않으나, 자신의 웹사이트에 외부 리소스를 추가해 본 경험이 없는 초보자들에게는 다소 낯설게 느껴질 수 있는 접근 방식(?)을 요구하기 때문에 그에 대한 내용을 정리해보았습니다. 폰트어썸을 사용해 본 경험이 전혀 없는 사람을 대상으로 설명합니다. 폰트어썸에는 유료 아이콘도 많이 있지만, 여기에서는 무료 아이콘 사용에 대해서만 이야기합니다.
폰트어썸 홈으로 : https://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
사용 절차
1. 폰트어썸 홈 화면 상단에 보이는 'Start for Free' 버튼을 클릭합니다. 폰트어썸을 이용하려면 반드시 계정 등록 및 이메일 인증을 해야 하는데, 'Start for Free' 버튼은 관련 페이지로 이동하는 버튼입니다.
2. 이어서 등장하는 화면에는 커다란 입력 필드가 보이는데, 여기에 본인의 이메일을 적고 노란색의 'Send Kit Code' 버튼을 클릭해주세요. 그러면 입력한 메일로 인증 메일이 전송됩니다.
3. 아래와 같은 화면이 나타나면 이메일 사이트(네이버, 다음, 구글 메일 등)로 이동해 폰트어썸에서 보낸 인증 메일을 확인합니다.
4. 메일 박스를 열어 폰트어썸에서 보낸 메일을 확인하면, 다음과 같은 화면이 나타납니다. 여기에서 'Confirm Your Email Address'를 클릭하면 인증이 완료되고, 자동으로 다시 폰트어썸 사이트가 열립니다.
5. 다시 열린 폰트어썸 사이트에서 가장 먼저 할 일은, 비밀번호 설정입니다. 폰트어썸을 위해 사용할 비밀번호를 새롭게 설정하고 다음 단계로 넘어갑니다.
6. 비밀번호 설정을 마치면 계정 작업은 사실상 끝입니다. 그러나 폰트어썸에서는 추가로 설문조사까지 요구하니, 이에 적당히 응해준 뒤 계정 작업을 최종적으로 마치시면 됩니다.
7. 계정 생성이 완전히 끝나면, 사용자에게는 킷코드(Kit Code)가 제공됩니다. 이 킷코드는 폰트어썸 이용자로써 폰트어썸에 대한 사용권을 인증하는 코드이므로 무척 중요합니다. 이를 복사하거나, 어딘가에 따로 저장해두세요. 실제 내 웹사이트를 코딩할 때 이 코드가 필요합니다.
8. 킷코드를 얻었다는 것은 아이콘을 사용할 자격을 얻었다는 의미입니다. 이제 내 웹사이트에 표시할 아이콘을 직접 찾아보겠습니다. 폰트어썸의 아이콘 페이지로 이동합니다(https://fontawesome.com/icons). 그리고 상단에 표시되는 입력 필드에 사용하고자 하는 아이콘을 검색합니다. 여기에서는 커피(coffee)를 검색해보았습니다.
9. 검색 결과로 나타나는 아이콘들 중 원하는 것을 선택합니다. 이때 무료 아이콘과 유료 아이콘이 함께 나타나니, 선택 후 무료 여부를 꼭 확인해보시기 바랍니다(화면 왼편에는 무료 항목만 볼 수 있는 필터링 메뉴도 존재하니 참고하세요).
10. 아이콘을 선택하면, 해당 아이콘을 웹사이트에 반영할 수 있는 코드가 나타납니다. 내 웹사이트의 HTML 문서에 이 코드와 킷코드를 함께 입력하면 해당 아이콘이 표시됩니다.
11. 코드는 다음과 같이 작성해주세요. <body> 태그 안쪽에 아이콘 태그와 킷코드가 차례대로 작성되어 있습니다.
12. 웹 브라우저에서 문서를 열어 결과를 확인하면, 아이콘이 잘 표시되고 있음을 확인할 수 있습니다.
끝.
'IT > 프로그래밍' 카테고리의 다른 글
| MariaDB 설치 및 사용법 정리 - 오픈소스 관계형 데이터베이스 (0) | 2023.02.02 |
|---|---|
| 아나콘다 프롬프트 주요 명령어 요약 정리 (1) | 2022.08.17 |
| 주피터 노트북(Jupyter Notebook) 사용법 (0) | 2022.08.15 |
| 자바 JDK 설치 및 환경변수 설정 방법 (0) | 2022.06.24 |
| 명령행에서 PSSecurityException:UnauthorizedAccess 오류 발생했을 때 해결하는 법 (0) | 2021.09.15 |