폰트아이콘 사이트 모음
웹상의 아이콘폰트를 이용하면 쉽게 아이콘을 사용할 수 있습니다.
장점은 일일히 포토샵으로 아이콘 이미지를 만들지 않아도 아이콘을 사용할수 있습니다.
그림이 아닌 폰트로 인식하고 폰트로 취급합니다.
따라서 font-size, color 등의 태그로 컨트롤 합니다.
1. fontawesome
https://fontawesome.com/
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
2. xeicon
https://xpressengine.github.io/XEIcon/
XEIcon, 문자를 그리다
XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다.
xpressengine.github.io
아이콘의 디자인이 이쁘다.
3. 구글 머터리얼 아이콘
https://fonts.google.com/icons?icon.set=Material+Icons
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
★ 구글 머터리얼 아이콘 사용하기
<link href=" https://fonts.googleapis.com/icon?family=Material+Icons " rel="stylesheet">
<link href=" https://fonts.googleapis.com/icon?family=Material+Icons+Outlined " rel="stylesheet">
또는
@import url(" https://fonts.googleapis.com/icon?family=Material+Icons ")
★ 구글머터리얼 아이콘 가이드
https://developers.google.com/fonts/docs/material_icons?hl=ko#icon_font_for_the_web
머티리얼 아이콘 가이드 | Google Fonts | Google for Developers
이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 머티리얼 아이콘 가이드 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 머티리얼 아이
developers.google.com
https://m2.material.io/develop/web/getting-started
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
일반적인 아이콘
<link href=" https://fonts.googleapis.com/icon?family=Material+Icons " rel="stylesheet">
Outlined 아이콘
<link href=" https://fonts.googleapis.com/icon?family=Material+Icons+Outlined " rel="stylesheet">
Rounded 아이콘
<link href=" https://fonts.googleapis.com/icon?family=Material+Icons+Rounded " rel="stylesheet">
Sharp아이콘
<link href=" https://fonts.googleapis.com/icon?family=Material+Icons+Sharp " rel="stylesheet">
Twotone 아이콘
<link href=" https://fonts.googleapis.com/icon?family=Material+Icons+Twotone " rel="stylesheet">
4. iconicons
https://ionic.io/ionicons
Ionicons: The premium icon pack for Ionic Framework
Ionicons is an open-sourced and MIT licensed icon pack.
ionic.io
5. iconmonster
https://iconmonstr.com/
iconmonstr - Free simple icons for your next project
To use this icon, you must first accept the license agreement.
iconmonstr.com
6. 더나운 프로젝트
10M Free Icons & Stock Photos | SVG & PNG | Download Today
Vast, Free Icon Collection Since 2010, Noun Project has been the world’s top collection of icons and icon packs for presentations, websites, user interfaces, and more. With nearly 10 million free vector icons and high-resolution photos, we’re known for
thenounproject.com
7. feather icon
Feather – Simply beautiful open source icons
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
feathericons.com
'html jquery css' 카테고리의 다른 글
| [패스트캠퍼스] 웹퍼블리싱 강의 8주차 (4) | 2023.07.15 |
|---|---|
| [패스트캠퍼스] 웹퍼블리싱 강의 7주차 (1) | 2023.07.08 |
| [패스트캠퍼스] 웹퍼블리싱 강의 6주차 (1) | 2023.07.01 |
| [패스트캠퍼스] 웹퍼블리싱 강의 5주차 (0) | 2023.06.24 |
| [패스트캠퍼스] 웹퍼블리싱 강의 4주차 (0) | 2023.06.17 |
| [패스트캠퍼스] 웹퍼블리싱 강의 3주차 (0) | 2023.06.10 |
| [패스트캠퍼스] 웹퍼블리싱 강의 2주차 (0) | 2023.06.02 |
| [패스트캠퍼스] 웹퍼블리싱 강의 1주차 (0) | 2023.05.27 |