폰트아이콘 사이트 모음
웹상의 아이콘폰트를 이용하면 쉽게 아이콘을 사용할 수 있습니다.
장점은 일일히 포토샵으로 아이콘 이미지를 만들지 않아도 아이콘을 사용할수 있습니다.
그림이 아닌 폰트로 인식하고 폰트로 취급합니다.
따라서 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
'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 |