Bootstrap Icons
Bootstrap은 다양한 아이콘을 사용하여 메뉴 등등을
더욱 명확하게 가시화 할 수 있는데요.
기본적으로 Bootstrap에서는 1500개 이상의 무료 Icon을 제공합니다.
직접 원하는 아이콘 종류를 검색해 볼 수도 있습니다.
설치 방법도 간단히 아래 코드를 cmd에 입력해 주면 됩니다.
npm i bootstrap-icons
https://icons.getbootstrap.com/
Bootstrap Icons
Official open source SVG icon library for Bootstrap
icons.getbootstrap.com
Font Awesome
또 많이 사용하는게 Font Awesome 인데요.
약 7천개 이상의 icon을 제공하지만 무료 버전은 1600개 정도입니다.
Free로 체크해서 보시면 되고, icon 종류별로도 중복 검색이 가능해서 조금 더 편리합니다.
사용을 위해서는 starts 메뉴에서 이메일을 입력하고 링크를 받아
프로젝트에 해당 링크를 작성해 주면 됩니다.
그리고 원하는 아이콘을 클릭해 들어가서 'Start using this icon'을
클릭하고 코드를 복사해서 사용하면 됩니다.
https://fontawesome.com/v5.15/icons?d=gallery&p=2
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
Flaticon
Flaticon은 벡터 아이콘과 스티커 등도 다운받을 수 있습니다.
조금 더 동글동글하고 귀여운 스타일의 아이콘입니다.
사용법은 register 후 download하거나 CDN으로 import하여 사용하는 방법이 있습니다.
다만 모두 무료는 아니라고 합니다.
https://www.flaticon.com/uicons
Icon Fonts for any project, big or small
+1800 SVG and web font-optimal vector-based icons for web, IOS, and Android applications.
www.flaticon.com
Material Design Icons
그리고 마지막 Material Design Icons가 제가 사용해 볼 icon입니다.
<CORONA> theme에 포함되어 있어 다운받을 필요가 없습니다.
따로 다운로드가 필요하다면 직접 다운받거나 CDN으로 사용할 수도 있습니다.
그리고 아이콘을 클릭하고 Advanced Export로 들어가면 size 및 color를
customizing할 수도 있습니다. 🤩🤩
일단 저는 원하는 메뉴에 맞는 아이콘을 찾아 써보도록 하겠습니다.
https://materialdesignicons.com/
Material Design Icons
Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project. Loading... Sponsored by Icons8 Material Icon Sets
materialdesignicons.com
Icon 적용
다시 <CORONA> 폴더로 돌아와 index.html에 적용해 볼까요?
애플리케이션에서 머티리얼 디자인 아이콘을 사용하려면 <head>에 다음 파일을 포함하세요. <link rel="stylesheet" href="path-to/node_modules/mdi/css/materialdesignicons.min.css"/>아이콘을 생성하려면 다음 코드를 추가하세요. <i class="mdi mdi-bell"></i>
documentation에 적용 방법이 나와있는데요, index.html에는 이미 적용이 되어 있으므로
제가 원하는 아이콘으로만 바꿔줍니다.
class 형식이 "mdi mdi-iconName" 이런 식으로 되어 있으므로
Material Design Icons 홈에서 원하는 icon을 찾아 mdi- 뒤에 넣어주면 됩니다.
icon은 <i> 태그로 이루어져 있습니다.
font 이름 뒤에 text-info, text-primary, text-danger 등등이 보이는데요.
이건 bootstrap에서 지원하는 기본 색상들의 명칭입니다.
Button에 적용된 색상을 볼까요?
이 색상을 참조해서 icon에도 적용하면 될 것 같습니다.
그리고 검색한 icon명 중에서도 html로 작성 시 자동완성이
되지 않는 것들은 표시가 안되니 자동완성으로 나오는 것들로
사용해 주시면 됩니다.
'Just Do It > Bootstrap' 카테고리의 다른 글
| Bootstrap chart - 라이브러리 소개 (0) | 2022.02.04 |
|---|---|
| Bootstrap - free theme <CORONA> Tables (0) | 2022.02.03 |
| Bootstrap - free theme <CORONA> 설치 (0) | 2022.01.28 |
| Bootstrap - free theme <CORONA> 시작하기 (0) | 2022.01.24 |
| Bootstrap - free theme <CORONA> 소개 (0) | 2022.01.21 |
