백지부터 시작하는 이세계 코딩 생활

Font Awesome 사용하는 방법 본문

Service || Server/HTML5 & CSS

Font Awesome 사용하는 방법

조아덕 2020. 9. 18. 14:56

Ref : uxgjs.tistory.com/186

 

Font Awesome 5를 슬기롭게 사용하는 방법

웹사이트를 개발하다 보면 아이콘이 필요한 경우가 많습니다. 인터넷을 찾아보면 다양한 방법과 형식으로 무료로 제공해 주는 웹사이트가 많이 있는데요. 그중에서도 가장 많이 사용되는 폰트�

ux.stories.pe.kr

 

HTML에 붙혀넣기

위에서 얻은 링크를 HTML의 <head></head> 사이에 붙혀넣기 합니다.

<html> 
<head>
	<!--CDN 링크 -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> 
</head> 
<body> 
</body> 
</html>

 

아이콘 보기

아이콘은 2가지 방식으로 찾을 수 있습니다.

무료 아이콘 보기

 

아이콘 확인

  1. Free를 클릭하여 무료버전만 필터링 합니다.
  2. 그중에서 Solid만 필터링 합니다.
  3. 아이콘의 아래에 있는 아이콘이름을 복사합니다.
    • 복사한 이름을 아래와 같이 fas fa- 다음에 적용합니다.
      -<i class="fas fa-address-book"></i>

무료 아이콘 cheatsheet로 보기

아이콘을 cheatsheet형식으로 제공합니다. 많이, 자주 사용하는 경우는 cheatsheet가 훨씬 편할 겁니다.

 

기본 적용방법

태그는 전통적으로 <i>태그를 사용합니다.

<i class="fas fa-camera"></i>
<i class="fas fa-camera"></i>
<i class="fab fa-aws"></i>
<i class="fab fa-github-alt"></i>

 

 

최종 적용 샘플

최종적으로 참고할 수 있는 샘플입니다.

<html>
<head>
<!--CDN 링크 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> 
</head> 
<body>
	<i class="fas fa-camera"></i>
	<i class="fas fa-camera"></i>
	<i class="fab fa-aws"></i>
	<i class="fab fa-github-alt"></i>
	<i class="fas fa-camera fa-xs"></i>
	<i class="fas fa-camera fa-sm"></i>
	<i class="fas fa-camera fa-lg"></i>
	<i class="fas fa-camera fa-2x"></i>
</body>
</html>

 

저작자표시 비영리 변경금지

'Service || Server > HTML5 & CSS' 카테고리의 다른 글

emailto 태그 사용하는 방법  (0) 2020.09.18
'Service || Server/HTML5 & CSS' Related Articles more
Comments