CSS Library - fontello

Develop My Life·2020년 5월 24일

CSS TIL

CSS

목록 보기

11/12

fontello

문자에 해당하는 폰트를 웹페이지에 추가해주고, 벡터 방식의 이미지를 웹사이트에 쉽고 안전하게 추가하는 사이트
http://fontello.com/

fontello 사용방법

정적 폰트 사용

원하는 폰트를 선택한다.
download webfont를 이용하여 다운받는다.
다운로드된 파일에서 demo 파일을 열어서 아이콘의 이름을 확인한다.
head 태그에 <link rel-"stylesheet" href="css/fontello.css">를 추가한다.
5-1. 사용하려는 위치에 class 이름으로 아이콘 이름을 사용해서 i태그를 만든다.
5-2. 사용하려는 위치에 code를 사용하여 입력한다.(demo 파일의 show code 활용)(0은 html에서는 &# 로 바꾸어 사용한다.)
6-2. 이 때는 font-family : fontello;로 설정해주어야 동작한다.

움직이는 폰트 사용

head 태그에 <link rel-"stylesheet" href="css/fontello.css">와 <link rel-"stylesheet" href="css/animation.css"> 를 추가한다.
사용하려는 위치에 class 이름으로 아이콘 이름을 쓰고 그 뒤에 사용할 animation 효과 이름을 쓴다.

예시

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="css/fontello.css">
    <link rel="stylesheet" href="css/animation.css">
    <style>
        body{
            font-family: fontello;
        }
    </style>
</head>
<body>
    &#xe800<br>
    <i class="icon-star "></i><br>
    <i class="icon-spin5 animate-spin "></i>
</body>
</html>

fontello 원리

class 이름을 사용한다.
before를 통해 아이콘은 코드를 입력시킨다.
before를 통해 font-family : fontello로 설정한다.

font 만들기

thenounproject.com 이나 다른 곳에서 svg파일을 다운받는다.
fontello의 custom icons을 이용하여 생성 후 다운받는다.
그 뒤에 fontello 사용 방법과 같다.

선택 상태 옮기기

fontello는 로그인 기능이 없기 때문에 내가 이전에 다운받았던 아이콘에 대한 기록이 없다. 이 기록을 다시 불러오고 싶을 때에는 같은 다운 받아진 config.json을 fontello 페이지의 import 기능을 사용하여 불러온다.

CSS-prefix 기능

이 기능은 아이콘의 이름 접두사를 바꿀 수 있는 기능이다.
기본값은 icon- 이다.

Develop My Life

다음 포스트