블로그를 할 때, 웹사이트를 운영할 때 아이콘 폰트를 사용해야할 일이 많습니다.
오늘은 무료로 아이콘 폰트를 제공하는 사이트 추천과, 직접 만들어서 적용하는 시간을 가져보겠습니다.
아래의 사진은 오늘의 과정을 모두 따라해서 만들어본 아이콘 폰트입니다.
왜 아이콘 폰트인가?
아이콘 폰트의 장점은 이렇습니다.
- 이미지와 달리, 확대를 해도 깨지지 않습니다.
- CSS로 자유자제로 커스터마이징을 할 수 있습니다. 크기 조절, 애니메이션 효과 모두 가능합니다.
- 여러 아이콘을 써도 파일의 크기가 작으므로 로딩 속도면에서 경제적입니다.
아이콘 폰트 만들기 사이트
아이콘 폰트를 사용하려면 무료로 아이콘 폰트를 제공하는 사이트로 가야 합니다.
여러 사이트들을 써봤지만 제가 추천하는 건 [블럭*IcoMoon*]이라는 사이트입니다.
이 사이트의 가장 큰 장점은 IE까지 지원하기 때문에 호환성이 최고라는 점이지요. [각주*일부 사이트는 IE만 가면 깨지는 현상이 있었습니다.*]
사이트로 접속하기
제가 제공하는 링크로 가시거나, 검색 사이트에서 icomoon을 검색하셔서 들어가시면 아래와 같은 사이트가 나올 겁니다.
그러면 위의 사진에서 제가 빨간 네모로 표시한, 오른쪽 위의 [**IcoMoonApp**]을 눌러주세요.
그러면 잠시의 로딩 시간을 가진 후, 위의 사진과 같은 창이 나올 겁니다.
이제 준비는 끝났습니다.
원하는 아이콘 폰트 만든 후 다운로드 하기
이제 아이콘들이 등장하면 원하는 아이콘을 클릭해주세요.
그러면 아래의 사진과 같이 선택된 아이콘에 노란테두리가 생기면서 선택이 됩니다.
[팁*너무 많이 고르면 폰트 자체의 용량이 커지므로 꼭 필요한 것만 넣어주세요.*]
원하시는 아이콘을 다 고르셨나요?
이제 화면 아래를 보면 [**Generate Font F**]라는 문구가 있을 겁니다.
그걸 눌러주세요.
이렇게 하면 제가 골라낸 폰트들이 쫙 나옵니다.
잘못된 부분은 없는지 체크해주신 후 아래를 보시면 아래와 같은 [**Download**] 버튼이 생성된 걸 알 수 있습니다.
눌러주시면 해당 아이콘이 포함된 폰트가 다운로드 됩니다.
이제 사이트에서 할 일은 끝났습니다.
icomoon.zip 파일의 압축을 풀어주시면 마지막 단계만 남았습니다.
웹에서 아이콘 폰트 사용하는 방법
받은 파일의 압축을 풀면 위와 같은 내용물들이 나옵니다.
우리가 봐야하는 것은 3개입니다.
- demo.html - 아이콘의 모습과, 어떤 문구를 써야 아이콘이 출력되는지 알려주는 파일입니다.
- fonts - 여기 있는 eot,svg,ttf,woff 파일을 업로드 해놔야 아이콘이 출력됩니다.
- style.css - 이 파일을 열어야 손쉽게 아이콘 폰트 마크업을 손에 넣을 수 있습니다.
준비가 끝났다면 사용하는 웹페이지나 블로그에 적용하면 됩니다.
제가 사용하고 있는 티스토리 블로그 기준으로 설명해보겠습니다.
스킨편집->파일 업로드를 통해서 [**fonts 폴더**]로 들어가서 거기에 있는 4가지 파일을 서버에 업로드 했습니다.
그러면 1단계가 완료된 겁니다.
2단계는 [**style.css**] 파일을 열어보는 겁니다.
style.css 파일에 대고 우클릭을 하면 위와 같은 창이 나올 겁니다.
연결 프로그램에 들어가서 메모장으로 열어주세요.
그러면 위와 같은 창이 나올 겁니다.
제가 스크린샷으로 표시한 부분 전체를 복사 후 붙여넣기로 CSS에 입력해주세요.
단, 제가 빨간 네모로 표시한 부분들은 경로인데, 이 경로는 실제 파일 업로드를 해서 얻는 경로를 넣으시면 됩니다.
티스토리를 예로 들자면,
업로드한 파일에 대고 우클릭을 하면 링크 주소 복사라는 게 나오는데, 그걸 눌러서 붙여넣기를 하면 경로입니다.
woff,svg,eot,ttf 파일의 경로를 모두 업로드한 파일의 경로로 바꿔주세요.
이제 마지막 3단계만 남았습니다.
아이콘 폰트를 사용할 준비가 끝났으니 실제로 발동하면 됩니다.
아이콘 폰트를 직접 사용하는 데엔 2가지 방법이 있습니다.
- 직접 아이콘을 복사-붙여넣기 해서 쓰기
- CSS의 ::before, ::after 같은 가상 선택자에 코드를 적어 쓰기
이 두 가지 방법을 사용하려면, [**demo.html**]을 참고하면 됩니다.
demo.html을 더블클릭해서 열어주세요. 혹은, 우클릭으로 연결프로그램을 통해 사용하시는 인터넷 브라우저로 열어주세요.
그러면 각 아이콘별 사용법이 나옵니다.
예를 들어 위의 사진의 icon-quill을 사용하려면 직사각형 부분을 드래그 후 복사 후 붙여넣기를 하면 해당 아이콘이 나옵니다.
css의 가상선택자에서 쓰려면 content 안에 e907을 적어주면 됩니다.
아래는 실제 사용해본 예제입니다.
심화-나만의 아이콘 폰트를 만들고 커스터마이징 하기
애석하게도 icomoon에서 제공하는 폰트 파일만으로는 부족할 때가 있습니다.
예를 들어 저 같은 경우엔 한국에서 주로 사용하는 SNS 모양의 아이콘 폰트를 쓰고 싶었는데, icomoon에선 제공하지 않았습니다.
그래서 직접 만들어서 커스터마이징을 했습니다.
방법은 간단합니다.
우선 원하는 아이콘 폰트로 사용할 이미지를 만들어주시거나, 저작권이 안전한 사이트에서 다운로드 받아주세요.
저는 강의를 위해서 임시로 ★쓰윔이라는 모양을 만들어봤습니다.
그리고 구글에서 SVG 변환을 검색해주세요.
그리고 결과에서 가장 먼저 뜨는 SVG 변환기 사이트에 들어가주신 후 파일 업로드를 해주시면 아래와 같은 창이 뜰 겁니다.
여기서 [**변환**]을 눌러주세요.
그러면 로딩이 들어가면서 잠깐 기다리면 변환이 완료됩니다.
완료가 되면 [**다운로드**]를 눌러서 다운로드를 받아주세요.
그러면 svg파일이 생길 겁니다.
이걸 보관해놨다가, 다시 icomoon 사이트로 들어가주세요.
그리고 아이콘 폰트를 고르는 창으로 들어가서, 왼쪽 상단의 [**Import Icons**]를 눌러주세요.
그 후, 아까 보관했던 svg파일을 골라서 업로드 해주시면..
나만의 아이콘 폰트가 완성되었다는 걸 알 수 있습니다.
굉장히 간단하고 편리합니다.
커스터마이징의 경우 css에서 크기 조절은 font-size로, 색깔은 color로, 움직이는 모션은 animation으로 구현하시면 됩니다.
활용법은 무궁무진하므로 원하시는 방식대로 하시면 됩니다.
참고로 제 블로그의 움직이는 공감 하트도 gif가 아니라 아이콘 폰트를 커스터마이징해서 만든 것입니다.
관련글
'그외 > 유용한 정보' 카테고리의 다른 글
| 디시인사이드에서 유동으로 쓴 글의 비밀번호를 까먹었을 때 대처방법 (18) | 2021.10.30 |
|---|---|
| 티스토리 블로그 더보기 버튼 css로 꾸미기 (4) | 2021.10.18 |
| 아마존(AMAZON)에 등록된 결제 카드 정보 삭제 하는 방법 (0) | 2021.07.29 |
| 윈도우10 작업표시줄 날씨 표시 위젯 끄기 방법 정리 (2) | 2021.06.12 |
| 업비트 (UPbit) 회원 탈퇴 방법 정리 (0) | 2021.06.11 |
