CSS 아이콘 라이브러리 fontello 사용하기

CSS 아이콘 라이브러리 fontello 사용하기

안녕하세요. TriplexLab 입니다. :)

오늘은 CSS 라이브러리 중 하나인 fontello에 대해서 알아보겠습니다.
여러 아이콘을 폰트로 제공하는 서비스입니다.

👀 fontello를 이용해서 아이콘을 웹페이지에 삽입하는 방법

1. http://fontello.com/  페이지에 접속한다.
2. 원하는 아이콘을 선택한다.
3.  우측 상단에 Download webfont 클릭을 한다.

원하는 아이콘들 선택한 모습

그럼 다운로드 받으면 압축파일을 풀고, 디렉토리(파일)을 자체를 
현재 자신이 진행하고 있는 프로잭트 디렉토리(파일)에다가 붙여넣기를 한다.

해당 파일을 다운로드한 모습

demo.html 파일을 보면 밑에와 같은 화면이 나올것에요. 여기서 아이콘 옆에있는
이름들을 class에 갔다가 붙이는 것이에요. 밑에서 확인할수 있어요ㅎㅎ

압축을 풀고 html파일을 브라우저에서 실행

그리고  html에다가 fontello-embedded css 파일을 연결을 시켜줍니다.

<link rel="stylesheet" href="./fontello/css/fontello-embedded.css">

그리고 밑에와 같이 
<i class="아이콘이름"></i> 하면 다운받은 아이콘이 브라우져에 적용이 됩니다.

<a href="#"><i class="icon-down-open-big"></i></a>

<a href="#"><i class="icon-search"></i></a>

 

👉 TIP

화면에 보여진다고 끝나는게 아니에요 이쯤되서 tip하나 드릴게요.
다운받은 아이콘에서, 이어서 아이콘을 추가해서 다시 다운로드 받을수 있는 기능 입니다.

1. http://fontello.com/  페이지에 접속합니다.
2. import를 클릭해요.

fontello 사이트 import 클릭

3. config.json 파일을 선택해요.

다운로드한 파일에서 config.json 선택

4. 그럼 이렇게 이어서 추가적으로 또다시 선택을 할수가 있는 화면이 나와요.

이어서 추가적으로 선택 가능한 모습