글꼴 굉장 아이콘

Font Awesome 아이콘 라이브러리는 519 개의 무료 확장 가능한 벡터 아이콘을 제공합니다. 이 라이브러리는 개인 및 상업용으로 완전히 무료입니다. 원래 Bootstrap 용으로 설계된이 아이콘은 쉽게 사용자 정의 할 수 있습니다.

글꼴 라이브러리로드

Font Awesome 라이브러리를로드하려면 웹 페이지의 <head> 섹션에 다음 줄을 복사하여 붙여 넣습니다.

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

아이콘 사용

Font Awesome은 여러 아이콘을 제공합니다. 그중 하나를 선택하고 <body> 태그 내의 HTML 요소에 아이콘 클래스 이름을 추가하십시오. 다음 예에서는 인도 통화 아이콘을 사용했습니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

다음과 같은 출력이 생성됩니다.

크기 정의

아래와 같이 CSS를 사용하여 크기를 정의하고 클래스 이름과 함께 사용하여 아이콘의 크기를 늘리거나 줄일 수 있습니다. 주어진 예에서 우리는 크기를 6 em으로 선언했습니다.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

다음과 같은 출력이 생성됩니다.

색상 정의

크기와 마찬가지로 CSS를 사용하여 아이콘의 색상을 정의 할 수 있습니다. 다음 예는 인도 통화 아이콘의 색상을 변경하는 방법을 보여줍니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

카테고리 목록

Font Awesome은 다음 카테고리에서 519 개의 아이콘을 제공합니다.

웹 응용 프로그램 아이콘
손 아이콘
교통 아이콘
성별 아이콘
파일 유형 아이콘
스피너 아이콘
양식 제어 아이콘
결제 아이콘
차트 아이콘
통화 아이콘
텍스트 편집기 아이콘
방향 아이콘
비디오 플레이어 아이콘
브랜드 아이콘

이러한 아이콘을 사용하려면이 장에 제공된 프로그램의 클래스 이름을 원하는 아이콘의 클래스 이름으로 바꿔야합니다. 이 단원 (Font Awesome)의 다음 장에서는 다양한 Font Awesome 아이콘의 사용법과 각 출력에 대해 범주별로 설명했습니다.