아이콘폰트
이전에는 특수한 글꼴이나 아이콘을 사용하기 위해 이미지 형식으로 제작하여 웹문서에 삽입하곤 했다.
이는 서버에 부하를 주고 로딩 속도에 영향을 미친다.
이를 극복하기 위하여 CSS 기법 중 하나인 Image Sprite 방식을 사용하여 여러 이미지를 하나의 큰 이미지에 포함시킨 배경 이미지로 제작하여 단 한번의 HTTP 요청을 통해 문서에 삽입하는 방식이 탄생했다.
아이콘 폰트도 웹폰트이기때문에 장/단점을 그대로 물려받는다.
- 하나의 글꼴에 다양한 아이콘을 넣어 두고 호출해 사용할 수 있다.
- 확장 가능한 벡터 그래픽을 이용하기에 모든 아이콘 크기를 변경할 수 있다.
- CSS로 가능한 어떠한 작업도 가능하다.
- 폰트 제공 업체에서 해당 폰트에 대한 유니코드를 지원한다면 모든 요소에 유니코드 형태로 삽입 가능하며, 로컬에서도 사용할 수 있다.
- 구형 브라우저 지원이 통일되지 않아 여러 폰트 형식을 준비해야 한다.
* 어떠한 크기로도 아이콘의 크기를 변경할 수 있지만 모든 기기에서 정상적인 결과를 얻을 수 있는 것은 아님
Font Awesome
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
XEIcon
http://xpressengine.github.io/XEIcon/
XEIcon, 문자를 그리다
XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다.
xpressengine.github.io
Ionicons
Ionicons: The premium icon pack for Ionic Framework
Ionicons is an open-sourced and MIT licensed icon pack.
ionic.io
Google Material icons
https://fonts.google.com/icons?selected=Material+Icons
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
'tip' 카테고리의 다른 글
| 크롬(chrome) 확장프로그램 추천 (0) | 2022.03.18 |
|---|---|
| [VS Code] 유용한 플러그인(Extension) (0) | 2022.01.30 |
| 티스토리 블로그에 트위터 이모지 적용하기 (1) | 2022.01.02 |
| 마우스 따라다니는 별가루 효과 (0) | 2021.11.12 |