CSS 폰텔로 fontello 활용하기

폰텔로 fontello

fontello는 딩벳이나 아이콘을 폰트로 제공하는 여러 서비스를 모아둔 서비스다. 특히 SVG 파일을 업로드하면 폰트로 만들어주기도 한다.

폰텔로를 사용하기 위한 사이트

Fontello - icon fonts generator

This site will not work if cookies are completely disabled. {"assets_hash":"4f281663992d71f728e8efc840ca28ff","page_data":{},"locale":"en-US","layout":"fontello.layout"}

fontello.com

폰텔로 적용 과정

우측 상단에 다운로드를 선택하여 폰트를 적용할 수 있는 CSS파일을 받는다.

demo을 열어보면 폰트마다의 문자값 또한 볼 수 있다. (그런데 뭔가 버전이 부족한지 오류로 demo버전에 폰트 예시 모양이 안뜬다.)

1. <link>을 이용하여 fontello.com 사이트에서 다운 받은 파일 안에있는 css/fontello.css 파일을 지정한다.

2. <body> 값안에 <i>을 이용하여 class-="icon-chrome"처럼 demo 사이트에 폰트 옆에 적혀진 이름을 선언해 준다.

3. 이렇게 <body> 값 안에 <i class="icon-chrome"></i>만을 적용해도 실행되는 이유는 헤드 부분에서 link로 걸어둔 fontello.css파일 안에서 편리하게 프로그램밍 되어 있어 가능한 일이다.

추가 기능

추가로 <link>을 이용하여 animation.css 파일 또한 연동시켜주어 지정한 폰트에 애니메이션 효과 또한 적용할 수 있다.

'프로그래밍 개발 > CSS' 카테고리의 다른 글

HTML+CSS+Media Query 반응형 클론 웹 사이트 제작. (0)	2020.11.02
HTML CSS (feat. jQuery) 간단한 포트폴리오 웹 사이트 코딩. (0)	2020.10.27
CSS 코드 경량화 minify (0)	2020.10.26
CSS link와 import를 이용한 유지 보수 (0)	2020.10.26
CSS 그래픽 - background, filter, transform, transition (0)	2020.10.22