Font Awesome 使用指南

RecoReco發表於2018-07-04

Font Awesome （簡稱FA）是一套圖示庫，有這些優良的特性：

  1. 除了讓使用者可以在1000多個高質量圖示內選擇圖示之外
  2. 無極縮放。 如何字型一樣使用圖示，指定大小即可，不必擔心變大後圖示變形的問題
  3. 可以指定顏色，背景色，就如同字型一樣

實際上，技術上來說，這套圖示不再是一個個的圖片，而是一套字型，如同文字一樣的使用它。

開始使用

最簡單的案例，可以使用CSS來加入圖示到HTML內：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<nav>
  <i class="fa fa-heart"></i>
</nav>
複製程式碼

可以檢視效果，就是按鈕的左邊有一個心形的圖示出現。如果你想單獨顯示一個圖示，典型的做法是通過標籤<i>來完成：

<i class="fa fa-heart"></i>
複製程式碼

然而<i>不是為了設定文字的斜體嗎？是的，如今的情況，外觀都習慣用CSS來完成了，之前的i標籤作為一個指定樣式的標籤，是非常落寞的了，實際上大部分情況下，儘管此標籤依然可以預設設定其內的文字為斜體，但是大家都不會在這樣用了，此標籤都已經被棄用，不如在這裡重新啟用它就是了。實際上，很多標籤都可用來顯示已圖示，比如b標籤。自所以使用i，因為它也可以是Icon的縮寫。

我們再來看看，如果指定顏色和背景色大小：

 <i class="fa fa-heart" style="color:red;background: blue;font-size: 3rem"></i>
複製程式碼

是的，它確實可以如同字型一樣，指定它的這三個屬性即可。要多大都可以！

如下程式碼中，i和b標籤的斜體和粗體依然可以使用，但是設定了class後，實際的外觀有CSS控制了：

<nav>
  <i>I am Italic</i>
  <b>I am Bold</b>
  <i class="fa fa-heart"></i>
  <b class="fa fa-heart"></b>
</nav>
複製程式碼

另外一種用法是使用SVG的選擇，FA也只是字型圖示以SVG的形式出現，因為SVG是向量圖形，因此依然具備無極縮放的特點。

<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>
<nav>
  <i class="fa fa-heart" style="color:red;background: blue;font-size: 3rem"></i>
</nav>
複製程式碼

你會發現，使用SVG引用的檔案，從CSS變成了JS檔案，並且開啟此檔案，依然可以顯示心形圖示，但是檢視元素構成會看到，i標籤被替換成為SVG標籤，此標籤內就是一個個的繪製向量圖的SVG指令。

FA套件內有些什麼

可以從此地址下載FA套件：

https://use.fontawesome.com/releases/v5.1.0/fontawesome-free-5.1.0-web.zip
複製程式碼

內容如下：

LICENSE.txt	js		metadata	sprites		webfonts
css		less		scss		svgs
複製程式碼

我們來看看這些目錄的用途：

  1. 我們使用的all.css就在css目錄內，此目錄內還有其他的檔案，但是我們暫時不去關心它們。
  2. 我們使用的all.js檔案在js目錄下，其他檔案暫時不關心。
  3. webfonts目錄內放置各種格式的字型，所有的字型圖示都在這裡，字型是有很多標準的，但是在使用層面，我們不必關心它，因為這些字型檔案是由css使用的，我們只要引用css，並且保證此目錄內的檔案都在就可以了。
  4. svgs檔案，就是我們以SVG方式使用此字型圖示庫的原始檔，但是它也是被all.js檔案使用的，我們也暫時不去關心細節內容。如果你對svg感興趣，可以進入此目錄，使用瀏覽器開啟這些檔案，瀏覽器可以開啟這些檔案，顯示對應的向量圖形出來。你也可以使用檔案編輯工具開啟SVG檔案，它們就是一些XML檔案，是文字的，因此可以直接開啟和閱讀它們。
  5. sprites目錄內是把全部需要使用的svg打包到一個檔案，目的是為了優化在HTTP中傳輸的效能，因為在HTTP中一個大檔案比起分隔起來的若干小檔案來說傳輸效率更高。
  6. less和scss都是css的原始碼檔案，可以用來生成css檔案的

直接使用原始字型的方法

我們可以通過CSS或者SVG+JS方式使用FA，但是，也可以直接使用字型檔案，只要知道字型在檔案中的程式碼，即可直接使用。

如下案例，我們使用WOFF字型：

<style>
	.fa.fa-bars {
		font-size: 28px	;
		color:red;
		background: blue;
	}
	@font-face {
	font-family: FA;
	src: 
	url("./fonts/fontawesome-webfont.woff") format("woff");
	}
	.mytextwithicon {
    position:relative;
	}    
	.mytextwithicon:before {
		content: "\f0c9";  
	    font-family: FA;
	    font-size: 18px;
	    left:-5px;
	    position:absolute;
	    top:0;
	 }
</style>
<span class = "mytextwithicon"></span><br/>
<i class = "mytextwithicon"></i>
複製程式碼

首先使用@font-face宣告一個字型名稱，比如FA，然後通過url指定字型檔名。之後在你需要的任何地方使用FA字型，就如同任何其他的字型比如Sans，Rome等，我們在mytextwithicon指定它會在約束的元素之前加入一個圖示，圖示的程式碼是"\f0c9"，它代表的就是一個bars的圖示。程式碼和圖示的對照表，需要看對應的字型檔案說明了。

嵌入到Custom Element的方法

要是FA可以嵌入到HTML Custom Element內的話，就意味著可以做定製圖示的控制元件了，這是非常好的元件化的程式設計，只是略微特別的是，使用Custom Element就意味著需要使用Shadow DOM，那麼在HTML內引入的CSS檔案是無法影響到Shadow DOM內的。想要可以發生效果，比如在Shadow DOM內再次import一次。做法如下：

<link rel="stylesheet" href="../font/css/font-awesome.min.css">
<template id="r-demo">
	<style>
	   @import url("../font/css/font-awesome.min.css")
	</style>
	<nav>
	  Icon:<button class="fa fa-search">Click Me!</button>
	</nav>
</template>
<script type="text/javascript">
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
	createdCallback: {
		value: function() {
			var t = importDoc.querySelector("#r-demo");
			var clone = document.importNode(t.content, true);
			this.createShadowRoot().appendChild(clone);
		}
	}
});
document.registerElement("r-demo", {prototype: proto});
</script>
<r-demo></r-demo>
複製程式碼

這裡的關鍵，就是：

@import url("../font/css/font-awesome.min.css")
複製程式碼

有些令人意外的引入了兩次，兩者是同一個檔案。

相關文章