icomoon 사용법 아이콘 폰트 직접 만들어보자!

icomoon을 이용해서 fontawesome과 같이 아이콘 폰트를 직접 만들 수 있습니다.
천천히 따라서 만들어보세요.

① 일러스트 파일로 아이콘 만들어 svg 파일로 저장하기

② icomoon에서 아이콘 폰트로 만들기

① svg 파일 만들기

먼저 아이콘으로 변환할 모양을 일러스트로 만들어준 후 "Save As"로 svg 파일로 저장합니다.
또는 이미지를 svg로 변환하는 사이트에서 변환하여도 됩니다.

이와 같이 svg 파일이 생성되었습니다.

② icomoon 사이트에서 아이콘 폰트로 변환

1) icomoon 사이트에서 IcoMoon App 를 클릭합니다.

https://icomoon.io/app/#/select

Convert SVG Icons to Export as Icon Font, SVG, PNG, PDF, Sprite, etc. ❍ IcoMoon App

icomoon.io

2) 왼쪽 상단에 있는 Import Icons 를 클릭해서 저장해둔 svg 파일을 가져옵니다.

3) svg 파일이 들어오면 svg 파일을 선택하고 하단에 있는 [Generate Font]를 클릭합니다.

4) icomoon 아이콘 폰트가 생성됩니다.

icomoon 아이콘 폰트 링크하기

Enable Quick Usage를 클릭하면 icomoon에서 공유하는 스타일 코드를 볼 수 있습니다.
icomoon에 style.css가 생성되는데 style.css를 다운로드 받지 않고 이 코드를 <head> 안에 넣고 링크하면 됩니다.

생성된 폰트 아이콘에 마우스를 올려놓으면 코드를 확인할 수 있는 링크가 나타납니다.
클릭해서 확인해보세요.

생성된 아이콘 폰트를 넣기위해서 HTML에 있는 소스를 복사합니다.
그리고 아이콘 폰트가 위치할 HTML에 붙여줍니다. 그 밑에 css 코드를 확인할 수 있습니다.

여기까지는 icomoon에 저장된 style.css를 불러와서 html에 아이콘 폰트를 넣을 수 있는 방법입니다.

내 서버에 icomoon 아이콘 폰트 저장하기

① icomoon 폰트 다운로드 받기

icomoon에서 제공하는 style.css는 서버에 용량을 차지하지 않고 링크만 할 수 있어 편합니다.
그러나 언제 바뀔지 모르기때문에 서버에 저장하는 방법이 더 안정적입니다.

브라우저 우측 하단에 Download 를 클릭하여 생성된 아이콘 폰트를 다운로드합니다.

icomoon.zip 파일이 다운로드 됩니다.

압축파일을 풀면 아래와 같은 파일이 있습니다. 여기에서 필요한 것은 style.css와 fonts 폴더입니다.

링크하는 방법은 demo.html에 들어 있으니 보고 따라할 수 있습니다.

② icomoon 아이콘 폰트 서버에 업로드

style.css를 확인해보면 아래와 같이 @font-face가 생성되어 있습니다. fonts폴더에 icomoon에서 eot와 ttf 그리고 woff가 생성되어 있습니다.

fonts 폴더와 style.css를 서버에 업로드합니다.
fonts폴더와 style.css의 저장위치가 바뀌었을 때는 style.css에서 경로를 바르게 수정해줘야합니다.

스타일을 확인하면 각 아이콘마다 색깔을 지정해줄 수 있습니다.

저는 여러가지 색상을 혼용할 경우 한 개체수마다 path가 생성됩니다.

하나의 path로 하고 싶다면 단색으로 sgv를 생성해야 합니다.

💡 하나의 path로 생성할 경우, 로고 등 색상이 단색이여야 합니다.
단순히 단색 svg로 저장하는 것이 아니라 일러스트에서 작업을 해주어야 합니다.

단색으로 변경하고, 오브젝트를 선택한 뒤 패스파인더에서 합해주기를 하고 svg로 저장한 후 icomoon에서 변환해야 합니다.

✔ svg가 단색일 경우 icomoon 코드

③ html에 icomoon 폰트 삽입

아래와 같이 html 문서에 style.css 의 link rel을 추가하고 아이콘 폰트 class 값을 넣어줍니다.

함께 보면 좋은 컨텐츠

무료 아이콘 사이트 - 5개 사이트 +1

무료 아이콘 사이트 - 5개 사이트 전에는 일러스트에서 직접 폰트를 그려서 png로 저장해서 쓰거나 svg로 저장해서 썼는데요. 지금은 그냥 무료 아이콘 사이트에서 가져옵니다. 깨지지 않는 아이

amango.tistory.com

유료 이미지 사이트 12개 목록

요즘 들어 블로그나 유튜브 영상 콘텐츠 제작 시 무료 이미지보다는 유료 이미지를 사용하는 추세입니다. 과거에는 사진 편집 프로그램 내 자체 내장된 기본 이미지로도 충분히 퀄리티 높은 결

amango.tistory.com

[html] <button> 링크하기 , 새창 링크하기(a링크, onclick 링크, input 링크)

버튼에 링크하는 방법, 새창으로 링크하는 방법입니다. 버튼 에 링크하는 방법은 여러가지 입니다. 로 링크하는 방법 에 onclick로 링크하는 방법 으로 링크하는 방법 태그에 링크하는 방법 에 a

amango.tistory.com

저작자표시 비영리 변경금지 (새창열림)

'HTML&CSS' 카테고리의 다른 글

html 띄어쓰기 공백넣기 💯 (0)	2023.02.20
티스토리 동영상 유튜브 하단 여백 제거 성공 🙌 (4)	2023.02.05
[html] <button> 링크하기 , 새창 링크하기(a링크, onclick 링크, input 링크) (0)	2023.02.01
icomoon 폰트 아이콘 사용법 (0)	2023.01.19
<button> 버튼에 링크하기 (0)	2022.12.02

잡다지식 | 🍋에이망고🍓🍋🍉

icomoon 사용법 아이콘 폰트 직접 만들어보자!

① svg 파일 만들기

② icomoon 사이트에서 아이콘 폰트로 변환

icomoon 아이콘 폰트 링크하기