[HTML] Font awesome 대신 Google Material Icons 사용하기
Font awesome 으로 아이콘을 사용하는 방법 대신에
Google Material Icons를 이용해서 아이콘을 빠르게 가져와 보자.
사용법 가이드: https://developers.google.com/fonts/docs/material_icons#icon_font_for_the_web
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
구글 아이콘 : 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
사용방법
1. 먼저 CDN을 head 태그 안에 넣어준다.
2. 사용할 아이콘의 태그를 이런 방식으로 넣어준다. 예) <span class="material-icons">face</span>
2-1. 클래스는 material-icons 쓰기
2-2. text 부분에 원하는 모양의 text 이름을 넣기
<head>
<!-- Google Material Icons CDN -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<li>
<i class="material-icons ">favorite_border</i>
<i class="material-icons">favorite</i>
<i class="material-icons ">done</i>
<i class="material-icons ">clear</i>
</li>
</body>
</html>
실행결과
font awesome 보다 활용 방법이 더 쉬운 것 같다.