Securing Keys

[Web] 웹 개발할 때, 웹 폰트 아이콘 사용하기 본문

IT/Web

[Web] 웹 개발할 때, 웹 폰트 아이콘 사용하기

GRACE_MJ 2020. 7. 31. 13:55

깔끔하고 직관적인 웹페이지 개발을 위해 

아이콘을 손쉽게 사용하는 방법에 대해 알아보고자 합니다

 

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

 

Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

 

웹 아이콘 폰트를 사용하면

다운받고 웹 서버에 업로드하지 않아도,

링크를 통해 쉽게 아이콘을 가져올 수 있습니다

 

웹 아이콘 폰트 중 가장 유명한 곳이 Font Awesome입니다

 

 

사이트에 들어가면 위와 같이

웹에서 사용하기 유용한 아이콘을 볼 수 있습니다

 

말 그대로 "웹 아이콘 폰트"이기 때문에

코드로 크기도, 색상도 변경이 가능합니다

 

 

 

 

<head>
	...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/[버전]/css/font-awesome.min.css">
    ...
</head>

head 부분에서 위와 같이

CDN 선언을 해주어야 합니다

CDN 선언을 해주면 추후에 아이콘을 사용할 때

body 부분에서 아이콘을 클래스명으로 호출할 수 있기 때문입니다

 

 

 

 

 

 

 

 

 

캘린더 아이콘을 호출해보도록 하겠습니다

 

<i class="fa fa-calendar-check-o" aria-hidden="true"></i>

body에 위와 같이 코드를 넣으면 아이콘이 호출됩니다

 

 

 

 

만약 색깔을 변경하고 싶다면,

 

<span style="color:green"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>

이렇게 초록색으로 변경할 수도 있습니다

 

 

 

<i class="fa fa-calendar-check-o" style="font-size:300px;" aria-hidden="true"></i>

크기 조정도 가능하고요,

 

 

 

<i class="fa fa-calendar-check-o fa-rotate-90" aria-hidden="true"></i>

90도 방향 회전도 가능합니다

 

 

 

<i class="fa fa-refresh fa-spin fa-fw"></i>

그리고 계속해서 회전하는 액션을 적용할 수도 있습니다

 

 

 

<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i> 
<i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span>

아이콘 중첩 또한 가능합니다.

저작자표시

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

[Web] 이클립스에서 Spring MVC 프로젝트 시작 & 웹서버 설정  (0) 2020.08.14
[Web] 웹 Request / Response 패킷 분석  (0) 2020.07.30
[Web 개발] GCP VM 인스턴스에 Xshell 연결하기  (0) 2020.07.28
[Web 개발] 공개용 홈페이지 만들기! 웹 호스팅 서비스 이용방법  (1) 2020.07.27
[RootMe] Web - Server Challenge 1. HTML - Source Code  (0) 2020.01.11
'IT/Web' Related Articles more
Comments