Fontawesome字型使用說明及其常用效果語法

2021-08-03 10:39:16 字數 2435 閱讀 2221

本文主要介紹如何在我們的站點裡引入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

使用fa-fw

下面的知識點厲害了,想不想不通過js,就讓圖示動起來? font-awesome就可以實現,僅僅乙個css類,就可以讓我們的圖示動起來。

下面介紹兩個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 用來反轉圖示顏色,生成可見圖示組

使用例項

class="fa-stack fa-3x">

class="fa fa-stack-1x fa-chain">

i>

class="fa fa-stack-2x fa-circle-o ">

i>

span>隨便找的兩個圖示合成

li>

font-awesome最新版完整使用教程

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多個高質量圖示內選擇圖示之外 無極縮放。如何字型一樣使用圖示,指定大小即可,不必擔心變大後圖示變形的問題 可以指定顏色,背景色,就如同字型一樣 實際上,技術上來說,這套圖示不再是乙個個的,而是一套字型,如同...