커스텀 가능한 아이콘 PNG, GIF, SVG 라이브러리
1. 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
Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용 되는 라이브러리 입니다.
심플하고 플랫한 디자인의 아이콘들이 많지만 최근에 일부 아이콘들이 유료화 되었습니다.
[사용법]
간편하게 CDN을 제공하기 때문에 회원가입 한 뒤에 쉽게 사용할수 있습니다. (해드 태그에 사용)
- Font Awesome 5
<head>
<!-- ... -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
/>
<!-- ... -->
</head>
2. Ionicons
Ionicons: The premium icon pack for Ionic Framework
Ionicons: The premium icon pack for Ionic Framework
Ionicons is an open-sourced and MIT licensed icon pack.
ionic.io
Font Awesome 보다 아이콘 수는 적지만 마찬가지로 깔끔하고 플랫한 디자인들로 구성되어있다.
크기, 색상 등이 CSS를 이용해 변경 가능하고 유료 아이콘은 없다.
Ionicons도 Font Awesome과 동일 하게 CDN을 제공하고 있다. (바디 태그에 적용)
<body>
<!-- ... -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<!-- ... -->
</body>
3. Google Fonts Icon
https://fonts.google.com/icons?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글에서 제공하는 심플한 아이콘 라이브러리다.
마찬가지로 CDN을 제공하고 있다. (헤드에 적용)
https://developers.google.com/fonts/docs/material_icons
Material Icons Guide | Google Fonts | Google Developers
Material Icons Guide An overview of material icons—where to get them and how to integrate them with your projects. What are material icons? Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our de
developers.google.com
4. flaticon
Free Vector Icons and Stickers - Thousands of resources to download
Download Free Vector Icons and Stickers for your projects. Resources made by and for designers. PNG, SVG, EPS, PSD and CSS formats
www.flaticon.com
귀엽고 아기자기한 아이콘, 스티커를 무료로 제공한다.
하지만 무료로 제공되는 파일은 오직 PNG 이고 나머지 SVG 등은 유료로 결제해야 사용할 수 있다.
5. loading.io
애니메이션이 적용된 아이콘, 배경 등이 대부분이다.
애니메이션이 적용된 것들은 거의 대부분 유료이며 제공형식도 PNG, SVG, GIF 등 다양하다.
- 기존 애니메이션 의 delay, color 등을 사이트에서 커스텀 할수 있다는 점이 장점이다.
- 또한 직접 사이트에서 자신만의 SVG, GIF 파일의 애니메이션을 만들 수 도 있다.
뿐만 아니라 직접 커스텀이 가능한 "Loading Bar 라이브러리" 도 제공한다.
<head>
<!-- lodaing-bar 라이브러리 -->
<link rel="stylesheet" type="text/css" href="loading-bar.css" />
</head>
<body>
<div class="ldBar" data-value="50"></div>
<!-- lodaing-bar 라이브러리 -->
<script type="text/javascript" src="loading-bar.js"></script>
</body>