웹 아이콘 사용법 - Google Material, Font Awesome, glyphicons

//=============
< Google Material Design >


* 아이콘 리스트
https://material.io/tools/icons/?style=baseline


* 사용법
https://google.github.io/material-design-icons/

    - css 포함
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


    - 표시
<i class="material-icons">copyright</i>


    - 크기 변경

        - css 지정
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

<i class="material-icons md-18">face</i>


    - 색변경
        - css 지정
.material-icons.orange600 { color: #FB8C00; }

<i class="material-icons orange600">face</i>




//==============
< font awesome >
https://fontawesome.com/v4.7.0/


* 아이콘 리스트 (675개)
https://fontawesome.com/v4.7.0/cheatsheet/


* 사용법
https://www.w3schools.com/icons/fontawesome_icons_intro.asp


    - css 포함 CDN Servers
font-awesome CDN

    - cloudflare  , (40ms)
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    - maxcdn.bootstrapcdn , (300ms - 900ms)
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    - stackpath.bootstrapcdn  , (800ms - 1500ms)
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


* 다운로드
https://github.com/onface/font-awesome/releases/tag/v4.7.0

font-awesome-4.7.0.zip

    - 표시(사용 예)
<i class="fa fa-envelope-open-o"></i>


    - 크기 변화
        fa-lg,  fa-2x ~ fa-5x
  <i class="fas fa-igloo fa-lg"></i>






//============
* Glyphicons
    - Basic : $89
https://www.glyphicons.com/
     Bootstrap 3 포함됨
     Bootstrap 4에는 제외됨,

    - 안쓰는 것 추천
        bootstrap을 쓰지 않는 곳에서는 bootstrap.css를 포함시키면 전체 문서 형식을 바꿈


- 아이콘 리스트
https://glyphicons.bootstrapcheatsheets.com/

    - 표시
<span class="glyphicon glyphicon-search"></span>

//=================
* bootstrap.css 없이 glyphicons 아이콘 사용하기

    - CDN 이용
    - 참고 : https://stackoverflow.com/questions/37448338/how-to-include-glyphicons-without-using-bootstrap-css


* 방법 1
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

   

* 방법 2
<!-- 부트스트랩 v3.3.7 의 glyphicons 아이콘 추출, CDN 서버는 CloudFlare . size=14k-->
<link href="bootstrap.337-glyphicons-cf.css" rel="stylesheet">

bootstrap.337-glyphicons-cf.css

    - 사용 예 <i class="glyphicon glyphycon-heart"></i>

//============
* IcoMoon
    - Ess:$39, Ult:$59
https://icomoon.io/icons-icomoon.html
   
    - Free Download
https://github.com/Keyamoon/IcoMoon-Free