[Web] google material-icons 적용하기(Outlined, Fill, Rounded, Sharp, Two tone)

2022. 12. 9. 08:44·Programming/Web
728x90

폰트 아이콘

보통 홈페이지에서 아이콘은 이미지로도 사용하지만, 모바일도 지원해야 할 경우에 이미지의 크기를 조정해야 한다.

이미지의 크기를 2배 이상으로 넣어야 하고, 크기를 마음대로 늘리고 줄일 경우 깨짐 현상이 발생할 수도 있다.

이런 경우에 사용할 수 있는 것이 폰트 아이콘이다.

폰트 아이콘은 말 그대로 폰트 스타일 내부에 아이콘을 삽입해  제공함으로써 벡터 이미지의 형태를 띠게 된다.

폰트이기 때문에 사이즈나 컬러도 마음대로 조정할 수 있다. 또한 깨지지도 않는다.

google material icons 적용하기

google material icons는 사용성 높은 폰트 아이콘 중의 하나이며 한 아이콘에도 여러 가지 스타일을 제공한다.

5가지 아이콘 스타일 제공

사용법

  1. 상단에 링크를 import한다. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  2. 홈페이지에 들어간 후 원하는 아이콘을 선택하면 우측에 태그가 뜬다. 이 태그를 그대로 붙여 넣으면 끝이다.
  3. 사용하려는 스타일이 Rounded일 경우 그 스타일도 같이 import 해주면 된다. <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

https://fonts.google.com/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

 

아이콘의 크기는 font-size 로 설정가능하며, line-height 등으로 조절해서 사용가능하다.

물론 다른 방법으로도 할 수 있다.

'Programming > Web' 카테고리의 다른 글

[Web] 사물인터넷(Internet of Things, IoT)  (0) 2023.01.22
[Web] 16진수 체계와 주소체계  (2) 2022.11.20
[Web] HTTP Request(요청), HTTP Response(응답) 구조  (0) 2022.11.07
[Web] Maven과 Gradle 비교  (0) 2022.11.07
[Web] 절대경로/상대경로  (0) 2022.11.06
'Programming/Web' 카테고리의 다른 글
  • [Web] 사물인터넷(Internet of Things, IoT)
  • [Web] 16진수 체계와 주소체계
  • [Web] HTTP Request(요청), HTTP Response(응답) 구조
  • [Web] Maven과 Gradle 비교
arajo
arajo
  • arajo
    아라 메모장
    arajo
  • 전체
    오늘
    어제
    • 분류 전체보기 (509)
      • Language (298)
        • HTML (55)
        • CSS (11)
        • JavaScript (70)
        • TypeScript (8)
        • Python (33)
        • Java (119)
        • C (0)
        • C# (2)
      • Programming (92)
        • Programming (14)
        • Web (51)
        • Apache (1)
        • MySQL (23)
        • AWS (3)
      • Framework | Library (26)
        • Framework | Library (3)
        • Vue.js (2)
        • React.js (5)
        • React Native (4)
        • Node.js (1)
        • Ajax (1)
        • Bootstrap (8)
        • Spring (1)
        • Flutter (1)
      • etc (2)
      • 휴식 (19)
        • 책 (13)
        • 일기 (5)
        • 게임 일기 (1)
      • A (71)
        • 공부 (18)
        • 기타 (6)
        • 일 (47)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    event
    파이썬
    Python
    next.js
    타입스크립트
    객체
    JavaScript
    TypeScript
    변수
    CSS
    array
    object
    MySQL
    react
    리액트
    제어문
    Java
    HTML
    web
    자바스크립트
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
arajo
[Web] google material-icons 적용하기(Outlined, Fill, Rounded, Sharp, Two tone)
상단으로

티스토리툴바