Font Awesome 사용법

- 웹 개발용 아이콘, 폰트 사용 방법

* Font-Awesome

https://fontawesome.com/start

- 가격 : Pro $60/년

- cheat sheet

5.0

https://fontawesome.com/cheatsheet

https://fontawesome.bootstrapcheatsheets.com/

https://fontawesome.com/v4.7.0/cheatsheet/

//=================

* FontAwesome CDN

- 4.7.0 : 용량 1.13MB

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

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

- 5.6.1 : 용량 13MB, (Pro=36MB)

- All

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

- Solid

<link href="https://use.fontawesome.com/releases/v5.6.1/css/solid.css" rel="stylesheet">

<link href="https://use.fontawesome.com/releases/v5.6.1/css/fontawesome.css" rel="stylesheet">

- Regular

<link href="https://use.fontawesome.com/releases/v5.6.1/css/regular.css" rel="stylesheet">

<link href="https://use.fontawesome.com/releases/v5.6.1/css/fontawesome.css" rel="stylesheet">

//=========

* 사용예

<i class="fa fa-plus" style="color: red; font-size: 24pt;"></i>플러스 아이콘

색깔 변경 : style="color: red;"

크기 변경 : style="font-size: 24pt;"

* 별도 css 에 정의

.android {
    padding-left: 10px;
    position: relative;
}
.android:before {
    content:   "\f17b";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: blue;
    font-size: 19px;
    position: absolute;
    top: 2px;
    left: 0;
}