기본 콘텐츠로 건너뛰기

나만의 아이콘 폰트(Icon font) 만들기

정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 때에 따라서는 내가 원하는 아이콘을 폰트화 시켜서 사용해야 할 경우도 있습니다. 이번에는 나만의 아이콘 폰트를 만드는 방법에 대해서 정리해 보려고 합니다.

아이콘 폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다.

나만의 아이콘 폰트 만들기

img img

오픈소스로 제공되어 정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 내가 원하는 아이콘을 아이콘 폰트 형태로 만들어서 사용할 수도 있습니다. 이럴경우 필요한 아이콘만 사용할 수 있어서 용량을 줄일 수 있는 잊점이 있습니다.
다만 아이콘 폰트로 만들어야하는 아이콘은 벡터그래픽 파일 형식인 SVG 파일 포멧이어야 합니다.

아이콘 폰트를 만들어 주는 대표적인 웹사이트가 fontello.com와 icomoon.io 가 있습니다.

아이콘 폰트 생성하기

fontello.com로 아이콘 폰트 생성 방법

먼저 fontello.com에 접속을 합니다. fontello.com는 웹사이트 페이지 전환 없이 한 페이지에서 아이콘 업로드부터 다운로드까지 완료 되도록 되어 있습니다.

사이트에 접속을 하면 기본적으로 무료로 제공되는 아이콘들이 이미 있습니다. fontello에서 제작한 것도 있고 Font Awesome에서 불러온 것 등 다양한 무료 아이콘 폰트도 있습니다.
라이선스가 표시되어 있으니 확인 후 사용하시면 됩니다.

fontello.com 홈페이지

  1. 제작자와 버전, 홈페이지, 라이선스 등 아이콘 폰트에 대한 정보를 확인할 수 있습니다.
  2. 보이는 아이콘 중에 원하는 아이콘을 마우스로 선택을 하시면 아이콘에 붉은색 원형이 표시 되면서 선택이 됩니다.
  3. 만들고자 하는 아이콘(SVG포멧)이 있다면 해당 영역에 드레그앤드롭을 하여 업로드를 합니다. (등록된 아이콘도 마우스로 클릭하여 선택을 해야 최종적으로 만들어집니다.)
  4. Download Webfont 버튼을 클릭하면 지금까지 선택된 아이콘들이 압축되어 다운로드가 됩니다. (버튼에 선택된 건수가 표시되어 있습니다.)

설치 방법

다운로드 받은 압축파일을 해제합니다.

압축을 해제한 폴더구조

  • CSS 폴더 : 링크하여 사용할 수 있게 종류별로 CSS파일을 제작하여 제공합니다. fontello-ie7.css와 fontello-embedded.css 까지 제공하고 있습니다.
  • fonts 폴더 : 다양한 포멧의 아이콘 폰트 파일들이 있습니다.
  • demo.html : demo파일을 통해 다운로드된 아이콘 종류와 사용방법을 참고할 수 있습니다.

링크 연결 하기

  1. 다운로드한 아이콘 폰트를 웹사이트의 적절한 위치에 저장을 합니다.

  2. 웹사이트의 <head> 태그영역 안에 fontello.css 파일 위치를 아래와 같이 링크를 겁니다.

     <link rel="stylesheet" href="path/to/fontello/css/fontello.css">
 <link rel="stylesheet" href="path/to/fontello/css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="path/to/fontello/css/fontello-ie7.css"><![endif]-->

기본적용은 demo.html파일을 참고해야 해서 적용하면 되지만 기타 크기변경이나 색상변경 등은 일일이 다 CLASS를 만들어야 주어야 합니다.

폰트어썸이나 XEIcon은 class로 설정까지 모두 제작하여 CSS파일을 제공하는 반면에 Fontello 아이콘 폰트는 기본 적용에 대한 CSS만을 제공하기 때문에 여러가지 기능적으로 사용하기 위해서는 별도로 CLASS를 만들어야 합니다.

icomoon.io으로 아이콘 폰트 생성 방법

먼저 icomoon.io에 접속을 합니다. icomoon.io는 아이콘 폰트를 단계적으로 생성하도록 되어 있습니다.

icomoon.io는 다양한 유료 또는 무료 아이콘들을 아이콘 라이브러리 형태로 제공을 하고 있습니다. 그 제공되는 아이콘들을 선택하여 사용할 수도 있고 나만의 아이콘(SVG포맷)을 업로드하여 아이콘폰트로 변환 시켜 사용할 수도 있습니다.

아이콘 라이브러리를 선택할때는 항상 라이선스를 확인해서 라이선스에 위배가 되지 않아야 합니다. 각 아이콘 라이브러리에는 라이선스가 표시되어 있으니 참고하시면 됩니다.

icomoon.io 홈페이지

  1. 홈페이지에 접속을 합니다.
  2. 우상단에 IconMoon App버튼을 클릭합니다.

아이콘 업로드 하기

  1. 나만의 아이콘을 만들기 위해서 좌상단에 있는 Import Icons버튼을 클릭합니다.
  2. 확장자기 .svg인 아이콘 파일을 선택합니다.
  3. 열기를 선택해서 웹사이트로 업로드를 합니다.

아이콘 라이브러리 선택

▲ ④ 처럼 아이콘이 업로드 됩니다.
▲ 아이콘 라이브러리를 불러오기 위해서는 라이브러리 (⑤)를 선택합니다.

아이콘 라이브러리

다양한 아이콘 라이브러리를 볼 수 있습니다. Font Awesome, Material icons 등 무료 아이콘 라이브러리에서 부터 유료 아이콘 라이브러리까지 다양합니다.

  1. 아이콘 라이브러리 중 먼저 라이선스를 확인해야 합니다. 주로 SIL, Apache, MIT의 라이선스가 무료 라이선스라고 보시면 됩니다.
  2. 원하는 아이콘라이브러리를 골랐으면 하단의 Add 버튼을 누릅니다.

아이콘 라이브러리 선택

▲ 위와 같이 선택한 아이콘 라이브러리의 아이콘들이 나열합니다. 여기서는 구글의 Material icons을 선택했습니다.

아이콘 라이브러리 선택

  1. 아이콘을 업로드 했거나 아이콘 라이브러리에서 아이콘들을 불러왔으면 그중에서 사용하기 원하는 아이콘들을 마우스로 클릭하여 선택합니다.
  2. 웹사이트의 우측하단에 있는 Generate Font버튼을 클릭하여 다운로드를 합니다.

설치 방법

다운로드 받은 압축파일을 해제합니다.

압축을 해제한 폴더구조

  • demo-files 폴더 : 데모 웹사이트를 꾸미기 위한 CSS와 JS이므로 중요하지 않습니다.
  • fonts 폴더 : 다양한 포멧의 아이콘 폰트 파일들이 있습니다.
  • demo.html : demo파일을 통해 다운로드된 아이콘 종류와 사용방법을 참고할 수 있습니다.
  • style.css : 아이콘 폰트를 사용하기 위한 핵심 CSS 파일 입니다.

링크 연결 하기

  1. 다운로드한 아이콘 폰트를 웹사이트의 적절한 위치에 저장을 합니다.

  2. 웹사이트의 <head> 태그영역 안에 iconmoon/style.css 파일 위치를 아래와 같이 링크를 겁니다.

     <link rel="stylesheet" href="path/to/iconmoon/style.css"></head>

기본적용은 demo.html파일을 참고해야 하지만 기타 크기변경이나 색상변경 등은 일일이 CLASS를 만들어야 합니다.

폰트어썸이나 XEIcon은 class로 설정까지 모두 제작하여 CSS파일을 제공하는 반면에 IconMoon 아이콘 폰트는 기본 적용에 대한 CSS만을 제공하기 때문에 여러가지 기능적으로 사용하기 위해서는 별도로 CLASS를 만들어야 합니다.

사용 하기

기본 사용

img

<i class="icon-home"></i> icon-home

fontello.css와 iconmoon의 style.css에서 모두 기본적으로 icon-으로 시작되는 class에 대해 아이콘이 적용됩니다.

아이콘은 다운로드받은 파일 중 demo.html을 브라우저에서 띄운 화면에서 아이콘명을 찾아서 적용하면 됩니다.

아이콘 크기변경 (Larger Icons)

아이콘의 크기 변경이 가능하도록 CSS파일에 CLASS를 생성해애 합니다. 

.myicons.md-18 { font-size: 18px; }
.myicons.md-24 { font-size: 24px; }
.myicons.md-36 { font-size: 36px; }
.myicons.md-48 { font-size: 48px; }

<i class="myicons icon-home md-18">face</i>
<i class="myicons icon-home md-24">face</i>
<i class="myicons icon-home md-36">face</i>
<i class="myicons icon-home md-48">face</i>

아이콘 색상변경

아이콘의 색상 변경이 가능하도록 CSS파일에 CLASS를 생성해애 합니다. 

.myicons.md-dark { color: rgba(0, 0, 0, 0.54); }
.myicons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.myicons.md-light { color: rgba(255, 255, 255, 1); }
.myicons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.myicons.orange600 { color: #FB8C00; }

<i class="myicons icon-home md-dark">face</i>
<i class="myicons icon-home md-dark md-inactive">face</i>
<i class="myicons icon-home md-light">face</i>
<i class="myicons icon-home md-light md-inactive">face</i>
<i class="myicons icon-home orange600">face</i>

기타 다른 CLASS는 정해져 있지 않습니다. Frontend 개발자가 CLASS를 추가로 제작해서 사용해야 하기때문에 역량에 따라 더 잘 활용할 수도 있고 기본만 사용할 수도 있습니다.

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

CSS에서 ellipsis('...')를 처리하는 방법

이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 '...'으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. <div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } Block레벨 테그에서만 적용됨. overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함 text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함 white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능) 멀티라인 글자수 제한 멀티라인에 대해서 글자수를 제한하는 방법은 아래와 같습니다. <p class="txt_post">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다.&nbsp; 비도 추적추적 내리고 일정상 늦으막해서 그런지 사람이 많지는 않았다. 덕분에 보통때는 한참을 기다려야 겨우 날개달린 사진을 찍을 수 있었을 텐데, 이번에는 바로 천사날개를 달고 사진을 찍을 수 있는 행운까지 얻었다. 이번이 동피랑 벽화마을 방문 3번째인데 예전에 왔을때에 비해서 벽화가 많이 바뀌어 있었다</p> .txt_post { overflow: hidden; text-ove...
댓글 5개
자세한 내용 보기

Google 스프레드시트로 구글캘린더에 일정 연동하는 방법

저는 구글 제품을 많이 사용하는 편입니다. 제 주력 캘린더도 Google 캘린더 고요. 이번에 모임의 임원을 맡게 되면서 회원들의 생일을 캘린더에 등록해야 할 일이 생겼어요. 그냥 하나하나 등록을 하는 도중 "내가 지금 뭐하고 있나.." 라는 자괴감이 들기 시작했어요. 구글 시트에 있는 날짜 정보(생일)을 한 번에 쉽게 일괄 등록할 수는 없을까라는 생각이 뇌리를 스쳤습니다. 그래서 찾아봤더니.. 약간의 매크로 프로그램을 작성하면 가능할 것 같더라고요. 그래서 열심히 개발을 해봤습니다. 1시간이면 등록할 것을 8시간 걸려서 프로그램을 짜 봤어요. 결과적으로는 더 비효율적이었네요. ㅠㅠ 그러나... 나에게는 비효율 적이었지만 이코드를 공개하면 다른 사람에게는 큰 도움이 될 수 있겠구나 생각을 하고 코드를 공개해 보려고 합니다. 준비물 준비물은 Google 스프레드시트, Google 캘린더만 있으면 돼요. 당연히 무료고요. Google 캘린더 먼저 Google 캘린더를 만들거나 사용하고 있는 캘린더를 준비합니다. 적용하기 원하는 캘린더의 우측의 ... 를 클릭하고 설정 및 공유 를 선택합니다. 캘린더 ID를 잘 기억해 놓습니다. 나중에 이 ID를 활용할 예정입니다. Google 스프레드시트 회원생일 스프래드시트 공유 Google 스프레드시트로 명단과 생일을 작성합니다. ▲ 위와 같이 작성을 하면 되고 중요한 사항은.. 생년월일 이 구글 시트의 날짜 형식에 맞아야 합니다. 그리고 갤린더등록 , 캘린더상태 의 항목은 필수로 있어야 합니다. 캘린더등록 : 캘린더에 등록할지 제거할지를 표시 (ADD / DEL) 캘린더상태 : 현재 캘린더에 해당 항목이 적용되었는지 확인 (Y / ' ') 매크로 프로그램 작성하기 기본적인 준비는 끝났습니다. 이제부터 Apps Script를 제작하고 트리거를 등록하면 됩니다. Apps Script 작성하기 Apps Script 는 구글 제품에 대...
댓글 쓰기
자세한 내용 보기

Google캘린더(달력)에 대한민국 휴일 표시하기

구글 캘린더에 대한민국 휴일을 표시하는 설정에 대해서 소개합니다. 네이버 달력이라면 그냥 기본으로 나오겠지만 구글캘린더의 경우는 별도의 설정을 해 주어야 합니다. 휴일의 표시는 각 나라의 휴일을 구글에서 미리 작성해 놓은 것을 내 캘린더에 불러와 적용하는 방식으로 되어 있습니다. 대한민국 공유일 표시하기 먼저 설정화면으로 이동합니다. 캘린더 화면의 우측상단의 설정 아이콘을 클릭합니다. 메뉴 중 설정 을 클릭합니다. 설정화면 중 좌측 메뉴에서 캘린더 추가 메뉴를 선택합니다. 관심분야와 관련된 캘린더를 선택합니다. 지역 공휴일의 모두 둘러보기 를 선택하면 각나라의 휴일을 선택할 수 있습니다. 우리는 대한민국의 휴일 을 선택합니다. 캘린더에서 공휴일 보기 대한민국 휴일에 대한 설정을 했다면 이제 보기 좋게 표시하면 됩니다. 설정을 정상적으로 했다면 좌측메뉴에 대한민국의 휴일 이라는 캘린더가 보입니다. 캘린더명의 우측끝에 더보기 아이콘 을 선택합니다. 색상을 빨간색으로 선택합니다. (보통 공휴일은 빨간색이므로.. ㅎ) 그러면 캘린더에 휴일의 명칭이 빨간색 으로 표시되게 됩니다. 감사합니다.
댓글 쓰기
자세한 내용 보기