本文主要介紹如何在我們的站點裡引入footawesome字型,並且介紹一些fontawesome字型常用的一些使用方法。
下面是整理的一下使用心得。
解壓原始檔,原始檔如下圖。將css(樣式檔案),fonts(字型)將兩個資料夾拷貝到站點中。
在hmtl檔案中,引入css(發布使用min(壓縮版本),除錯可以使用未壓縮的) ,如:
這樣我們便可以在ui中,使用foot-awesome圖示了。
下面的例項是引用 crper大神寫的demo,在這兒借用此例項做乙個常用用法的介紹。
icon圖示的大小是 由字型大小決定的,也就說我們通過font-size來控制icon圖示的大小,font-awesome也提供了對應的規格類大小,更適用。
fa-lg比常規圖示大33%,而2x~5x都是常規圖示大小的倍數(fa-2x,fa-3x
)使用下面的知識點厲害了,想不想不通過js,就讓圖示動起來? font-awesome就可以實現,僅僅乙個css類,就可以讓我們的圖示動起來。fa-fw
類下面介紹兩個css類:
fa-spin :spin的速度是linear(勻速),一圈2s
fa-fa-pulse :
pulse分為八步(圖示分8次轉完一圈),一圈時間1s
圖示動畫例項:
最讓人吃驚的是這乙個了,圖示竟然還能湊在一起,如下圖:都是拼接起來的,突然就想起小時候玩過的那些「七巧板」,「魔尺」之類的玩具。class="icon-test-list">
class="fa fa-spin fa-2x fa-arrow-right">
i> fa-arrow-right-勻速旋轉,2s一圈li>
class="fa fa-spin fa-2x fa-spinner fa-pulse">
i>fa-spinner--一圈分為八次轉完,時間1sli>
fa-rotate-*:來控制旋轉的度數例如:fa-flip-*: 兩個引數來控制水平和垂直
fa-rotate-90
fa-rotate-180
fa-rotate-360
fa-flip-horizontal
fa-flip-vertical
使用語法:
要多新增乙個 fa-stack類,而後以此加上要堆疊的圖示
fa-stack作為父,組合子元素生成的物件;可以使用規格引數使用例項fa-stack-2x 作為背景的棧,要大於顯示圖形的棧
fa-stack-1x 作為背景棧內部的內容,所以要小於背景棧
fa-inverse 用來反轉圖示顏色,生成可見圖示組
font-awesome最新版完整使用教程class="fa-stack fa-3x">
class="fa fa-stack-1x fa-chain">
i>
class="fa fa-stack-2x fa-circle-o ">
i>
span>隨便找的兩個圖示合成
li>
WPF 新增字型,fontawesome
wpf使用字型時,可以不在系統中進行安裝,直接引用字型檔案就可以。這是乙個不錯的效能,這樣盡可能保持了程式本身的自管理。經常有一些需求需要引用一些常見圖示,fontawesome就是乙個不錯的選擇。向量字元充當圖示與點陣圖相比有他自身的優勢,這裡就不展開說了。那麼wpf程式中,如何引用字元圖示呢?準...
Font Awesome使用簡介
font awesome 是一種用字型來實現圖示的 css外掛程式。使用方法 到 包解壓到本地後,結構如下 在網頁中引用 css font awesome.css 或者css font awesome.min.css 比如 在網頁中用如下的方式來顯示圖示。效果如下 既然是一種字型,就可以通過改變字型...
Font Awesome 使用指南
font awesome 簡稱fa 是一套圖示庫,有這些優良的特性 除了讓使用者可以在1000多個高質量圖示內選擇圖示之外 無極縮放。如何字型一樣使用圖示,指定大小即可,不必擔心變大後圖示變形的問題 可以指定顏色,背景色,就如同字型一樣 實際上,技術上來說,這套圖示不再是乙個個的,而是一套字型,如同...