Font Awesome 사용법

Code/Web 2018.12.19 01:36

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


* Font Awesome

https://fontawesome.com/start

- 가격 : Pro $60/년



- cheat sheet

https://fontawesome.com/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 에 정의

<script>

/*별표 asterisk*/

.ast {

padding-left: 15px;

position: relative;

}


.ast:before {

content: "\f069";

font-family: 'FontAwesome';

font-style: normal;

font-weight: 400;

text-decoration: inherit;

color: red;

font-size: 10px;

position: absolute;

top: 2px;

left: 0;

}

</script>


- 사용

<i class="ast"></i> 별표



Posted by 코덴스

댓글을 달아 주세요