Font Awesome 圖示

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 個圖示 -

Web 應用圖示
手部圖示
交通圖示
性別圖示
檔案型別圖示
載入動畫圖示
表單控制元件圖示
支付圖示
圖表圖示
貨幣圖示
文字編輯器圖示
方向圖示
媒體播放器圖示
品牌圖示

要使用任何這些圖示，您必須將本章中給出的程式中的類名替換為所需圖示的類名。在本單元（Font Awesome）的後續章節中，我們按類別解釋了各種 Font Awesome 圖示的使用及其相應的輸出。

列印頁面