폰트 아이콘의 원리와 Fontello 사용 방법
웹에 아이콘을 넣는 방식은 다양하다. 이미지(png, gif등)로 불러오기, SVG를 불러오기 그리고 웹폰트로 만들어 추가할 수도 있다. Fontello는 미리 제공하는 아이콘 중 원하는 아이콘을 선택해 경량화된 웹폰트로 만들수 있으며 특히 SVG 파일을 업로드해 원하는 아이콘을 추가할 수 있다.
아이콘을 폰트로 넣게되면 CSS의 color 속성을 사용해 코드의 컬러를 변경할 수 있으므로 이미지 리소스보다 유지보수에 효율적이다.
사용법
- Fontello 사이트에서 원하는 아이콘을 선택하거나 Drag&Drop으로 폰트를 등록하고 Download webfont 버튼으로 다운받는다
- HTML 문서에 다운받은
fontello.css파일을 불러온다 - Demo 페이지에 있는 아이콘의 이름을 참고하여
<i class="icon-name"></i>형태로 클래스 명을 추가한다
원리
폰텔로가 제공하는 서비스는 쉽게 이야기하면 딩벳 폰트를 CSS로 사용하기 쉽운 방식으로 제공하는 것이다. HTML Entity라고도 하는데 우리가 특수문자 &을 HTML에 표현하기 위해 &라는 코드를 입력하는것과 같은 원리이다.
웹 페이지에 아이콘의 문자값을 입력하면 폰트에 등록된 값으로 출력된다. 그래서 각 아이콘의 문자값을 HTML에 추가하는 것과, 문자값이 깨지지 않고 출력될 수 있도록 font-family를 선언해 주는것이 필수적이다.
<!doctype html>
<html>
<!-- font -->
<link rel="stylesheet" href="css/fontelo.css">
<style>
body {
font-family:"fontello";
}
</style>
</html>
폰텔로의 아이콘은 CSS의 :before, :after 선택자를 통해 화면에 나타난다.
.icon:before {
content: "code";
}
위 코드는 특정 요소의 앞에 code라는 컨텐츠를 추가하는 코드이다.
fontello.css파일을 조금 더 자세히 살펴보면
font-face에서 font-family를 fontello 폰트 파일로 선언한다icon-접두사를 가진 모든 요소의:before에 각 아이콘의content를 선언한다- 각 아이콘마다 별도의 클래스명을 부여하고 그에 맞는 문자값을
content속성에 선언한다
클래스명과 컨텐츠 선언이 완료된 파일을 제공하기 때문에 우리는 CSS파일을 불러오고, 올바른 경로에 폰트 파일을 위치시키기만 하면 간단하게 원하는 아이콘을 사용할 수 있다.
폰트 만들고 유지보수 하기
폰트 만들기:
- fontello 홈페이지에 드래그 앤 드롭으로 svg 파일을 추가한다.
- Webfont를 다운로드 한다. 끝.
작업하는 컴퓨터를 바꾸거나 다른 브라우저를 사용할 경우 내가 선택한 아이콘의 정보가 사라진다.
이럴 경우 Download webfont 버튼 좌측의 도구 버튼 하위메뉴의 import 기능으로 내가 가진 fontello의 설정 파일인 setting.json 파일을 업로드해 기존 작업 내역을 불러올 수 있다.
또한 도구 버튼 하위메뉴 중 CSS prefix에서 원하는 접두사(prefix)로 변경이 자유롭다.