fontello 사용법과 원리

2023. 3. 22. 09:45

● fontello란

Fontello는 웹폰트(Webfont)를 쉽게 제작할 수 있도록 도와주는 온라인 도구입니다.

● 웹 폰트(web font)란

웹폰트란, 웹 페이지에서 사용되는 폰트를 서버에서 불러오는 것이 아니라, 브라우저에서 직접 다운로드하여 사용하는 방식입니다. 이를 통해 웹페이지가 더 빠르게 로딩되고, 디자인적인 자유도가 높아집니다.

● fontello 사용법

https://fontello.com/ (폰텔로 홈페이지) 접속

원하는 아이콘을 선택한 후 Download webfont를 클릭!

위의 사진처럼 파일을 다운받을 수 있다.

demo.html에서는 선택한 아이콘들과 showcode를 클릭하면 해당 아이콘의 코드를 볼 수 있다.

위의 사진처럼 test로 폰텔로를 적용한다.

코드예시

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<link rel="stylesheet" href="fontello-aa89f5de/css/fontello.css">
<style>
.icon:before {
content: '\e800';
font-family: "fontello"
}
</style>
</head>
<body>
<div class="icon">123</div>
</body>
</html>

서버를 실행하면 웹페이지에 아이콘이 적용된 것을 확인할 수 있다.

● 원하는 커스텀 아이콘 사용법

폰텔로는 svg형식의 파일을 적용시키기 때문에 원하는 이미지 파일을 svg 형식의 파일로 준비한 후

Custom Icons 파트에 드래그 앤 드롭 한다.

이 전과 같은 방식으로 다운로드 한다.

만약 기존의 아이콘에 커스텀 아이콘을 추가하고 싶을때

fontello(기존에 다운받은 폰텔로 폴더)/font/fontello.svg 경로에 있는 fontello.svg를 Custom Icons 파트에 드래그 앤 드롭 한다.

●fontello의 원리

폰텔로가 제공하는 서비스는 쉽게 이야기하면 딩벳 폰트를 CSS로 사용하기 쉽운 방식으로 제공하는 것이다.

HTML Entity라고도 하는데 우리가 특수문자 &을 HTML에 표현하기 위해 &라는 코드를 입력하는것과 같은 원리이다.

웹 페이지에 아이콘의 문자값을 입력하면 폰트에 등록된 값으로 출력된다. 그래서 각 아이콘의 문자값을 HTML에 추가하는 것과, 문자값이 깨지지 않고 출력될 수 있도록 font-family를 선언해 주는것이 필수적이다.

fontello.css파일을 조금 더 자세히 살펴보면

font-face에서 font-family를 fontello 폰트 파일로 선언한다
icon-접두사를 가진 모든 요소의 :before에 각 아이콘의 content를 선언한다
각 아이콘마다 별도의 클래스명을 부여하고 그에 맞는 문자값을 content속성에 선언한다

클래스명과 컨텐츠 선언이 완료된 파일을 제공하기 때문에 우리는 CSS파일을 불러오고, 올바른 경로에 폰트 파일을 위치시키기만 하면 간단하게 원하는 아이콘을 사용할 수 있다.

참고사이트 : https://archuive.tistory.com/76

'Web > CSS' 카테고리의 다른 글

CSS Layout (레이아웃) - position 속성 (0)	2023.01.30
CSS 표 적용하기 (0)	2023.01.27
CSS List (목록) (0)	2023.01.27
CSS 아이콘, 부트 스트랩 아이콘, 구글 아이콘 사용방법 (0)	2023.01.27
Google Fonts (구글 글꼴) (0)	2023.01.27

doornuddle