Font Awesome 使用指南

2021-09-11 09:00:49 字數 2394 閱讀 6676

font awesome (簡稱fa)是一套圖示庫,有這些優良的特性:

除了讓使用者可以在1000多個高質量圖示內選擇圖示之外

無極縮放。 如何字型一樣使用圖示,指定大小即可,不必擔心變大後圖示變形的問題

可以指定顏色,背景色,就如同字型一樣

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

最簡單的案例,可以使用css來加入圖示到html內:

複製**

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

複製**

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

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

複製**

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

如下**中,i和b標籤的斜體和粗體依然可以使用,但是設定了class後,實際的外觀有css控制了:

i am italici am bold

複製**

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

複製**

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

複製**

內容如下:

license.txt	js		metadata	sprites		webfonts

css less scss svgs

複製**

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

我們使用的all.css就在css目錄內,此目錄內還有其他的檔案,但是我們暫時不去關心它們。

我們使用的all.js檔案在js目錄下,其他檔案暫時不關心。

webfonts目錄內放置各種格式的字型,所有的字型圖示都在這裡,字型是有很多標準的,但是在使用層面,我們不必關心它,因為這些字型檔案是由css使用的,我們只要引用css,並且保證此目錄內的檔案都在就可以了。

svgs檔案,就是我們以svg方式使用此字型圖示庫的原始檔,但是它也是被all.js檔案使用的,我們也暫時不去關心細節內容。如果你對svg感興趣,可以進入此目錄,使用瀏覽器開啟這些檔案,瀏覽器可以開啟這些檔案,顯示對應的向量圖形出來。你也可以使用檔案編輯工具開啟svg檔案,它們就是一些xml檔案,是文字的,因此可以直接開啟和閱讀它們。

sprites目錄內是把全部需要使用的svg打包到乙個檔案,目的是為了優化在http中傳輸的效能,因為在http中乙個大檔案比起分隔起來的若干小檔案來說傳輸效率更高。

less和scss都是css的源**檔案,可以用來生成css檔案的

我們可以通過css或者svg+js方式使用fa,但是,也可以直接使用字型檔案,只要知道字型在檔案中的**,即可直接使用。

如下案例,我們使用woff字型:

複製**

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

要是fa可以嵌入到html custom element內的話,就意味著可以做定製圖示的控制項了,這是非常好的元件化的程式設計,只是略微特別的是,使用custom element就意味著需要使用shadow dom,那麼在html內引入的css檔案是無法影響到shadow dom內的。想要可以發生效果,比如在shadow dom內再次import一次。做法如下:

icon:click me!

複製**

這裡的關鍵,就是:

@import url("../font/css/font-awesome.min.css")

複製**

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

Ubuntu apt 使用指南

起初gnu linux系統中只有.tar.gz。使用者必須自己編譯他們想使用的每乙個程式。在debian出現之後,人們認為有必要在系統中新增 一種機制用來管理安裝在計算機上的軟體包。人們將這套系統稱為dpkg。至此著名的 package 首次在gnu linux上出現。不久之後紅帽子也 開始著手建立...

CImageList使用指南

1.綜述 在mfc 中cimagelist 類封裝了 影象列表控制項的功能,影象列表是乙個具有相同大小的 影象 可以是不同 型別 的集合,其主要用於 應用程式中大規模 圖示的儲存。該控制項是不可 見的,通常與其它如 clistbox ccombobox ccomboboxex ctabctrl 以及...

CImageList使用指南

cimagelist使用指南 1.綜述 在 mfc中cimagelist類封裝了影象列表控制項的功能,影象列表是乙個具有相同大小的影象 可以是不同型別 的集合,其主要用於應用程式中大 規模圖示的儲存,該控制項是不可見的。通常與其它如clistbox,ccombobox,ccomboboxex以及ct...