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")
複製程式碼

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

相關文章