웹 사이트를 만들때 아이콘들을 적용할때가 있는데, 이미지 처리하는 경우가 많다.
특히 다음과 같은 경우는 자주 쓰이는 아이콘 들이다.
그러나 이미지로 처리하는 경우 배경색을 조정하거나, 크기가 달라지는 경우 깔끔하지 못하다.
그래서 많이 사용하는 방법이 FontAwesome 이다.
웹사이트에 픽토그램(그림문자)를 아이콘으로 사용하는 것이다.
폰트어썸 사이트
폰트어썸 Icon List
Font-Awesome은 이미지가 아닌 폰트이기 때문에 HTML의 Font-style을 적용할 수 있습니다.
<i class="fa fa-fa-quote-left" style="color:#0000ff;font-size:50px;"></i>
또한, 자바스크립트를 별도로 사용하지 않기 때문에 브라우저에 따른 호환성 문제가 생기지 않습니다.
무료 아이콘은 현재 Version 5.7.2 기준으로
Free : 1,500개
Pro : 5,082개 입니다.
또한, 무료로 웹폰트 다운로드가 가능하며,
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
와 같이 링크 삽입으로도 쉽게 사용이 가능합니다.
HTML의 비교
<div id="mobile1"><a href= ><img src="./images/category.png"></a></div>
<div id="mobile1"><a href= ><i class="fas fa-bars"></i></a></div>
이미지를 불러 오지 않고도 간단히 폰트로 사용이 가능하다.
https://fontawesome.com/cheatsheet#regular
이런 형태로 CSS에 Contens로 삽입 가능
#c_title:before {content: "\f5ae"; font-family: 'Font Awesome 5 Free'; font-weight: 900;color: #bcbcbc; float: left; margin: 0 10px 0 0 ; }
'Computer Tip's > Web' 카테고리의 다른 글
| 티스토리(Tistory) 스킨(Skin) 제작기 - 사이드바 세팅값 (0) | 2019.02.25 |
|---|---|
| 화면 실제 크기 Pixel 나타내는 스크립트 width * height (0) | 2019.02.24 |
| 반응형 웹 템플릿 무료 사이트 (0) | 2019.02.15 |
| 애드센스 계정이 일시적으로 정지 - 해제 (2) | 2019.02.15 |
| 티스토리(Tistory) 스킨(Skin) 제작기 - 색상선정 #2 (0) | 2019.02.10 |