이전 포스트/코코아 html css

#6.3 Font Awesome

병고라니 2020. 12. 12. 20:47

아이콘을 적용하는데 두가지 방법이 있다. 

 

이미지파일이나 svg 파일을 가져다 쓰는거랑 

 

fontawesome을 쓰는방법

 

Heroicons에 가면 svg 파일로 쓸 수 있고 

fontawesome에 가면 무료/유료 아이콘을 쓸 수 있다.

 

start for free를 하면 이메일 인증 후 스크립트 코드를 주는데 그거를 head에다가 넣어두자

그다음 search에서 원하는 아이콘이름을 친 후 복붙을 하면 ㅇㅋ

 

serach에 wifi, battery, lighting을 검색한 후 복붙하자 ^^ 

 

i는 icon의 줄인말이다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script
      src="https://kit.fontawesome.com/2884eede74.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="status-bar">
      <div class="status-bar__column">
        <span>No Service</span>
        <i class="fas fa-wifi"></i>
      </div>
      <div class="status-bar__column">
        <span>18:43</span>
      </div>
      <div class="status-bar__column">
        <span>110%</span>
        <i class="fas fa-battery-full"></i>
        <i class="fas fa-bolt"></i>
      </div>
    </div>
  </body>
</html>