#1 Google Material Icons
링크 : https://fonts.google.com/icons
사용 방법
방법 1.
원하는 아이콘을 검색하여 클릭하면 오른쪽의 사이드바를 통해 사이즈 색상 등을 선택한 후,
아래쪽의 버튼을 눌러 SVG 또는 PNG 파일로 다운로드하여 사용할 수 있습니다.
방법2.
다운로드하여 사용하는 게 귀찮다 생각되면 HTML에 다음 스타일 시트 한 줄을 추가하는 것으로 손쉽게 사용할 수 있습니다.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">위 코드를 삽입하였다면 이제 원하는 장소에 다음과 같이 코드를 입력한 후, 해당 아이콘의 이름을 입력하면 됩니다.
(아이콘 이름은 위 이미지의 빨간 화살표 부분입니다)
<span class="material-icons">아이콘이름</span>
<!-- 위 이미지의 아이콘을 사용할 경우 -->
<span class="material-icons">get_app</span>
#2 Font Awesome
모든 아이콘을 사용하기 위해선 유료 결제(1년 $99)가 필요하지만, 무료로 사용할 수 있는 아이콘만으로도 충분히 매력적인 사이트.
링크 : https://fontawesome.com/icons
사용 방법
방법 1.
원하는 아이콘을 선택한 후 SVG 파일로 다운로드하여서 사용할 수 있습니다.
방법 2.
(1) 회원 가입을 한 후, 로그인을 합니다.
(2) 왼쪽 상단의 Kits를 눌러보면 자신에게 부여된 Kit's Code를 확인할 수 있습니다.
이 코드를 복사하여 HTML 문서에 붙여 넣습니다.
(3) 원하는 아이콘을 검색한 후 HTML 코드를 복사하여 사용할 수 있습니다.
위 이미지에서 <i class="fa-regular fa-keyboard"></i> 부분
참고사항
(1) 아이콘을 눌렀을 때 [Start Using This Pro Icon]이라고 적혀있는 건 유료 결제를 해야 사용할 수 있는 아이콘으로, 무료 사용자는 다운 및 적용할 수 없습니다.
(2) 또한 프로 아이콘인데 적용이 안될 경우 검색 조건중 버전을 6.0.0 이 아닌 5.15.4로 변경 후 검색 한 아이콘들을 사용하시면 됩니다.
#3 Bootstrap Icons
한글입니다 한글!!!
부트스트랩에서도 아이콘을 무료로 배포하고 있습니다. 꼭 부트스트랩을 사용하지 않더라도 간편하게 이용할 수 있다는 것 또한 장점입니다.
링크 : https://icons.getbootstrap.kr/
사용 방법
방법 1.
원하는 아이콘을 검색하여 선택한 후. 오른쪽의 버튼을 이용해 SVG 파일을 다운로드할 수 있습니다.
방법 2.
(1) 다음 코드를 HTML 문서나 스타일 시트에 상단에 붙여 넣어줍니다.
- HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">- CSS
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");(2) 아이콘을 클릭하면 나오는 아이콘 폰트를 복사하여 작성하는 문서에 붙여 넣어주면 됩니다.
방법 3.
어차피 몇 개 안 쓸 건데 모든 게 귀찮다 싶으면 HTML 복사라고 되어있는 부분을 복사하여 그대로 붙여 넣어줍니다.
#4 Iconoir
링크 : https://iconoir.com/
1007개의 SVG 아이콘을 제공 중이며 회원 가입이나 유료 결제 같은 과정이 없이 순수하게 원하는 아이콘을 검색하여 클릭하면 해당 아이콘을 바로 svg 파일로 다운로드할 수 있습니다.
CDN 방식은 제공하지 않는 듯합니다.