박코딩

박코딩

공부기록 블로그

fontello

2 minute read

fontello

문자를 대응하는 이미지로 바꾸어주는 것을 딩벳폰트(dingbat font)라고 한다. fontello는 딩벳이나 아이콘을 폰트로 제공하는 여러 서비스를 모아둔 사이트이다.

fontello

폰트들은 벡터이미지기 때문에 깨지는 문제가 없다.

페이지를 방문하면 여러 공급자들의 폰트를 모아서 볼 수 있으며 집 모양의 아이콘을 누르면 해당 폰트의 공급자의 페이지로 갈 수 있다.

fontello_house_icon

폰트들은 묶어서 일괄적으로 다운받는게 아니라 원하는것만 골라서 받을 수 있는 편리성도 가지고 있다.

선택한 폰트들은 압축파일로 받을 수 있고 안에 파일들을 살펴본다.

fontello_files

  • LICENSE.txt

    공급자별로 라이센스를 확인할 수 있다.

  • README.txt

    fontello를 사용하는 기본적인 설명이 적혀있다.

  • font 폴더

    웹폰트가 저장되어있으며 다양한 브라우저와 버전 등에 대응하기 위해서 포맷별로 있다.

  • css 폴더

    용도에 따라서 조합해서 사용하는 css 파일이 있다.

  • demo.html

    fontello를 사용하는 샘플을 볼 수 있다.

  • config.json

    다운받은 폰트의 정보를 저장한다. 사이트에서 import를 통해서 이전에 받은 폰트의 정보를 사용할 수 있다.


사용법

다운받은 fontello 폴더에서 에디터를 열어서 demo.html 파일의 코드를 참고한다.

페이지의 show codes를 누르면 각 이미지들에 대응되는 코드정보를 볼 수 있다.

html entities

html코드에서 이 예약어를 사용하면 브라우저는 그것을 문자셋(entities)에 대응하는 문자로 읽게 된다.

A -> A

예약어를 볼 수 있는 페이지
unicode-table


my.html

파일을 하나 만들고 코드를 입력한다.

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="css/fontello.css">
        <style>
            body{
                font-family: "fontello";
                color:red;
                font-size:200px;
            }
        </style>
    </head>
    <body>
      <!-- 이미지 코드 0xe807, 0은 문자 &#이다. -->
        &#xe807
    </body>
</html>

link로 fontello의 css파일을 참조하고 font-family를 적용시키면 demo.html의 이미지의 코드를 입력해주면 폰트를 예약어처럼 사용이 가능해진다.

폰트 속성이기 때문에 색상, 사이즈 등의 값도 설정이 가능하다.

하지만 코드를 사용한 접근 방법은 가독성도 떨어지고 매번 사용하기도 힘들기 때문에 demo페이지에서 폰트의 이름을 사용한다.

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="css/fontello.css">
        <style>
            body{
                color:red;
                font-size:200px;
            }
        </style>
    </head>
    <body>
        &#xe807
        <i class="icon-emo-tongue"></i>
    </body>
</html>

아무 태그를 사용해서 class값을 이미지 이름으로 넣어준다.

글자를 기울여서 표시하는 i(italic) 태그를 사용해서 class 값으로 해당 이미지의 이름을 넣어주니 폰트가 출력된다.

이 방식에는 font-family가 암시적으로 fontello로 지정되기 때문에 따로 선언해주지 않아도 된다.

원리

가상 선택자 before, after

선택한 태그의 컨텐츠 앞이나 뒤에 대해서 설정할 수 있다.

<!doctype html>
<html>
    <head>
        <style>
            #test:before{
                content:"s";
                color:black;
            }
            #test:after{
                content:"e";
            }
        </style>
    </head>
    <body>
       <div id="test">A</div>
    </body>
</html>

fontello도 마찬가지로 before 선택자를 사용해서 특정 폰트가 출력되게 만드는 것이다.

fontello.css 폴더를 확인해 보면

@font-face {
  font-family: 'fontello';
  /* ~ */
}

font-face를 임포트한다. 여기서 지정한 fontello가 font-familiy의 값이 된다.

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

/* ~ */

.icon-emo-tongue:before { content: '\e807'; } /* '' */

class 값이 앞에 icon- 문자가 오는 모든것을 대상으로 font-에 속성에 대한 설정이 되어있다. 이것 때문에 class에 이미지 코드를 넣었을 때는 따로 font-family를 선언할 필요가 없었다.

이미지 이름을 검색해보면 before를 사용하여 앞에 어떤 컨텐츠를 넣어준다는걸 알 수 있다.


애니메이션 적용

animation.css 파일을 link하고 폰트를 지정한 태그에서 원하는 애니메이션의 값을 넣어준다.

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="css/fontello.css">
        <link rel="stylesheet" href="css/animation.css">
        <style>
            body{
                color:red;
                font-size:200px;
            }
        </style>
    </head>
    <body>
        <div class="icon-emo-tongue animate-spin"></div>
    </body>
</html>


폰트 만들기

fontello 사이트에서 Custom Icons 기능을 사용해서 svg 파일을 등록하여 나만의 폰트를 만들 수 있다.

svg resources

svg 파일을 업로드 하고 다운로드 하면 위에서 사용했던 폰트의 형식으로 만들어 주기 때문에 쉽게 사용이 할 수 있게 된다.

설정되는 클래스 이름을 바꾸고 싶을 때는 다운로드 설정에서 css prefix로 원하는 이름으로 해주면 된다.

fontello_prefix

You may also enjoy