글꼴 굉장 아이콘

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 아이콘의 사용법과 각 출력에 대해 범주별로 설명했습니다.