[css] icon 아이콘 사용하기 ( google icons, font-awesome icons)

CSS / ICONS

Icon 특징

• 아이콘은 실제로는 글꼴이기 때문에 글자에 대한 스타일이 모두 적용된다.
• 원하는 아이콘의 링크를 걸어준다(google 등)
• span 태그내에 원하는 아이콘 class를 형식대로 지정해준다.(Icons, Icons+Sharp ..등)
• 원하는 아이콘이름을 span태그내에 작성
• 여러가지 아이콘을 적용할 때는 link태그에 uri에 | 를 이용

---

Google Icons ( CDN 동시에 여러가지 사용하기)

1. 구글 아이콘 사이트 접속
https://fonts.google.com/icons

Google Fonts

2. 원하는 아이콘의 종류 선택 (모양은 같은데 특성이 약간다르다.)

3. 원하는 아이콘의 종류 CDN 불러오는 방법 (여러가지 동시에)

  <!-- 기본적으로 CDN링크는 Material+Icons 한개만 제공 -->
  <link href="https://fonts.googleapis.com/
  icon?family=Material+Icons rel="stylesheet">
  
  
  <!-- 아래와 같이 | 를 사용하면 여러개의 아이콘을 동시에 불러올 수 있다. -->
    <link href="https://fonts.googleapis.com/
    icon?family=Material+Icons|Material+Icons+Sharp|Material+Icons+Two+Tone|Material+Icons+Outlined"
    rel="stylesheet">

4. 원하는 아이콘 선택후 코드 복사

5. 코드 복붙후 원하는대로 색상, 크기등을 변경 가능 (two-tone은 다른방법으로 변경가능)

    <!-- red로 색상 변경 -->
    <li>좋아요<span class="material-icons-outlined" style="color:red;">favorite</span></li>
    <li><span class="material-icons" style="font-size:50px; color:green;">android</span></li>
    <li><span class="material-icons-two-tone">face</span></li>
    <li><span class="material-icons-two-tone">pets</span></li>

---

Font-Awesome Icons 

 

1. 회원가입 
폰트 어썸을 사용하고싶은 경우 회원가입을 해야 한다. (무료로 사용 가능한 아이콘의 종류가 많고 회원가입이 간단하기 때문에 추천)

https://fontawesome.com/

Font Awesome

 

2. 로그인을 완료한 후 상단에 Icons 클릭

3.  CDN 설정
   (script나 link태그 둘중에 아무거나 사용해도 상관 X )

<script src="https://kit.fontawesome.com/cbcad42a26.js" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> 

4. 왼쪽에 Free를 누르고 사용하고 싶은 아이콘을 찾아 클릭

5.Start Using This Icon 버튼을 누른후 코드 복사

6. 복붙하고 원하는 스타일을 적용해서 사용

  <i class="fas fa-ad" style="font-size:100px; color:red"></i>
  <i style="font-size:100px; color:blue;" class="fab fa-bitcoin"></i>
  <i style="font-size:100px; color:pink;" class="fab fa-bitcoin fa-spin"></i>

---

font-awesome 옵션들

 

1. 크기 변경

<i class="fa fa-fa-ad fa-lg"></i> <!-- 33% 크기 -->
<i class="fa fa-fa-ad fa-2x"></i> <!-- 2배 크기 -->
<i class="fa fa-fa-ad fa-3x"></i> <!-- 3배 크기 -->
<i class="fa fa-fa-ad fa-4x"></i> <!-- 4배 크기 -->
<i class="fa fa-fa-ad fa-5x"></i> <!-- 5배 크기 -->

2. 아이콘 테두리 적용

<i class="fas fa-ad fa-border" style="font-size:100px; color:red"></i>

3. 아이콘 방향 회전

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

4. 회전하는 아이콘

 

<i class="fa fa-spinner fa-spin fa-fw"></i> 
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-fw"></i>  
<i class="fa fa-cog fa-spin fa-fw"></i> 
<i class="fa fa-spinner fa-pulse fa-fw"></i>