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...