구글 머터리얼 심볼 - html요소로 여러게 적용하기

 
안녕하세요 찐망고입니다.
 
결국 제가 구글머터리얼 심볼(Material Symbols)에
대해서  또 포스팅을 하게 되었네요.
솔직히 Customize 기능이 넘 사라 좀 쓸만하죠?

 

이전 발행글이 하나 있는데 css로 적용했던 방법을 포스팅 하였습니다.

새로운 구글 머티리얼 심볼 활용법: 웹아이콘의 모든 것

 

 
이번 포스팅은 수업 중 클론 코딩을 하다가 
저 펭귄그림 있는 부분에 아이콘들을

구글 아이콘을 html요소로 적용해보자로 시작해서
포스팅으로 마무리를 해봅니다

고도몰이커머스클론코딩

고도몰이커머스클론코딩

고도몰이커머스클론코딩

고도몰이커머스클론코딩

 
펭귄 두 마리가 있는 부분의 아이콘과 숫자들을
구글머터리얼심볼로 만들어 봤는데요.
 
일단 사이트 접속하고

Material Symbols and Icons - Google Fonts

 
 
머터리얼심볼 (new)를 선택하고

 
기본적으로 구글에서 제공하는 링크를 복사합니다.
하지만 우리는 아이콘 하나만 불러올게 아니므로 링크 수정을 조금 해야 하쥐

구글링크코드

 
위 코드를 고대로 쓰지 않고 아래 코드로 수정해서 쓸 거예요
왜냐하면 우리는 fill 속성이 있는 아이콘과 없는 아이콘이 공존하니까요..

<link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />

 
끝부분 링크 달라지는 거 체크하고 css문서를 하나 만듭니다
문서엔 기본적으로 제공하는 속성과 fill속성이 들어갈 클래스를 하나 만들어 추가하도록 합니다.

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.fill {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

 
자 그리고 마지막으로 span요소를 이용하여 구글아이콘을 불러와줍니다.
이런 식으로 말이죠

<p class="bubble">
    <span class="material-symbols-outlined">search</span>
    <span>200가지 앱으로 기능을 업그레이드</span>
</p>

<p class="bubble">
    <span class="material-symbols-outlined">keyboard_double_arrow_up</span>
    <span>클래스 듣고 레벨업 하기</span>
</p>

 
fill속성이 있는 아이콘들은 요소에 클래스를 추가해서 작성해 줍니다

<ol>
    <li>
        <div class="num-box">
            <span class="material-symbols-outlined fill">counter_1</span>
            <span>2분 만에 디자인된 쇼핑몰 만들기</span>
        </div>
    </li>
    <li>
        <div class="num-box">
            <span class="material-symbols-outlined fill">counter_2</span>
            <span>맞춤 설정하고 상품 등록하기</span>
        </div>
    </li>
    <li>
        <div class="num-box">
            <span class="material-symbols-outlined fill">counter_3</span>
            <span>결제 서비스 연결하고 판매하기</span>
        </div>
    </li>
</ol>

 
다 적용하고 나면 여러 개의 아이콘을 한눈에 확인해 볼 수 있습니다.