5월, 2019의 게시물 표시

Font Awesome 사용법

이미지
웹사이트를 만들때 아이콘은 필수적인 요소입니다. 아이콘을 사용하면 방문자들에게 좀 더 직관적으로 기능에 대해 어필이 가능하죠. 웹사이트의 기능을 글로 설명하는것이아니라 아이콘 하나로 대체함으로써 좀 더 깔끔한 웹페이지 구축도 가능합니다. 웹사이트에 픽토그램(그림문자)을 쉽게 넣는 방법이 있습니다. 바로 웹 아이콘 폰트를 사용하는 것인데요. 웹 아이콘 폰트는 여러 종류가 있으나 그 중에서 Font Awesome가 제일 유명합니다.  Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리 입니다. 이번 포스팅에서는  Font Awesome의 사용법에 대해 다뤄보려 합니다. Font Awesome 공식 사이트 Font-Awesome의 장점 1.  Html Font 속성이 모두 사용 가능하다. Font-Awesome은 이미지가 아닌 폰트이기 때문에 HTML의 Font-style을 적용할 수 있습니다. 이것은 굉장히 큰 장점인데요. 가령 Font-Awesome이 이미지였다고 생각해봅시다. 그럼 크기를 변경시킬때마다 이미지의 크기도 늘려야하고, 색을 변경시킬때마다 이미지의 색상도 변경해주어야 할 것입니다. 하지만 Font-Awesome은 그럴 필요가 없습니다. 간단하게 소스 몇줄만 추가해주면 크기도 늘릴 수 있고 색상도 변경할 수 있죠. < i class = "fa fa-lock" aria-hidden = "true" style = "color:#2353a5;font-size:100px;" > </ i > 2.  CSS를 적용시킬 수 있다. Font-Awesome에는 Css를 적용시켜 웹사이트만의 고유한 스타일로 응용할 수 있습니다. 일반적으로 크기나 색상 그림자효과와 같은것을 Css로 통일시켜 사용합니다. < style type = "text/css" > .pinkstyle { color : #f68181 ; font-size : 50px ;