在網站的前端網頁制作中,添加一些小圖標可以使網頁看起來更加的美觀。如果你沒有一些美工底子,又想弄一些漂亮的小圖標來裝飾你的網頁,那么圖示字體是一個不錯的選擇。

国产视频app今天給大家推薦一款圖標字體---Font Awesome

Font Awesome為我們提供可縮放的矢量圖標,我們可以使用CSS所提供的所有特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支持的效果。

Font Awesome下載與安裝

下載Font Awesome圖標字體,我們可以去它的官方網站下載,官方網站的下載地址在文章底部

下載方式,如下圖所示,點擊網頁中的 Download 下載即可,如果下載不了可以轉到Font Awesome的中文翻譯網站下載

QQ截圖20161203203033.png

下載Font Awesome圖標字體壓縮包后,解壓我們得到“CSS”和“fonts”二個文件夾并把它們上傳到網站服務器的CSS文件目錄中

在網站的頭部引用“CSS”文件夾中的“font-awesome.min.css”文件

使用圖標

国产视频app我們這里參考Font Awesome圖標的中文翻譯網站,鏈接同樣在文章底部

你在可以在網頁中想引用字體圖標的地方添加以下代碼

<i class="fa 圖標名稱"></i>

比如我想引用,下圖中紅色方框括起來的圖標


QQ截圖20161203205103.png

代碼1:

<i class="fa fa-adn"></i>

代碼2:

<i class="fa fa-android"></i>

代碼3:

<i class="fa btc"></i>

国产视频app通過上面的代碼,可以看出應用圖標字體非常的方便,只需要修改i標簽的class類名為你所選的字體圖標名即可,但有class中的"fa"類名是不能缺少的。我們還可以給圖體字體添加更多的類屬性,比如圖標字體的大小,顏色,陰影等。

鏈接網址

Font Awesome官方網站

国产视频appFont Awesome中文翻譯網站