Font Awesome 사용법

Code/Web 2018. 12. 19. 01:36

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


* 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;
}



반응형

'Code > Web' 카테고리의 다른 글

nginx 웹서버 리다이렉트 설정  (0) 2019.01.20
[Web] HTML DOM 요소 객체 리스트 정리  (0) 2018.12.22
Visual studio code 사용법  (0) 2018.11.13
[W3School] Bootstrap 정리  (0) 2018.11.08
[W3School] CSS 정리  (0) 2018.11.07
Posted by codens