什么是圖標字體？
圖標字體就是在做手機APP或WEB項目時為了能方便控制圖標的大小、顏色等屬性而將圖標字體化
圖標字體的優點
- 輕量性：圖標字體相比于純圖片占用的空間要小，加載的速度快
- 靈活性：圖標字體可以通過設置字體大小、顏色等方便地改變圖標的大小和顏色，不需要頻繁的更換圖片
- 資源豐富：網上有很多免費的圖標字體庫，提供的圖標十分豐富，能夠滿足我們絕大多數的開發需求
在線的圖標字體庫
-
Font Awesome：為Bootstrap而生，應該是最廣為人知的圖標庫，最新4.7版下載
font-awesome.png -
IcoMoon：提供了很多icon packes可以選擇性下載
icomoon.png -
阿里巴巴矢量圖標庫：阿里出品，海量圖標，隨意選擇和下載
iconfont.png
Axure使用圖標字體
在Axure使用圖標字體，避免了我們使用純圖片帶來的一系列問題：如想改變圖片顏色，需要重新導入新的圖片；想改變大小可能會導致圖片失真等
Axure中使用步驟（以Font Awesome為例）：
- 首先下載Font Awesome下載
-
雙擊安裝解壓后的fonts文件夾下的fontawesome-webfont.ttf字體文件
install_fonts.png - 安裝完成，如果此時Axure打開，需要重啟Axure，載入新的FontAwesome字體
- 借助word將Font Awesome的矢量圖片復制到Axure
- word中點擊插入->符號->其它符號
-
字體選擇FontAwesome（安裝完字體文件word中就有了該字體）
word_fonts.png - 插入到word中然后復制到Axure中
-
出現以下狀況，請選擇FontAwesome字體
axure_no_show.png -
正常顯示如下，可隨意更改大小及顏色
axure_show.png
生成Html文件
我們在Axure中做完后，一般會生成Html以供他人閱覽，而這時他人的電腦上沒有安裝指定的字體就會出現圖標不顯示的問題
解決方法
- 引入在線的css文件：一般的在線圖標庫有會提供css文件的cdn網絡地址，我們需要將url引入到Axure中
- 在Axure中使用CTRL+F5或點擊Publish->Preview Options打開選項框
- 然后點擊Configuration，選擇WebFonts項，新增一個webfont，名稱為FontAwesome，url為css文件的cdn地址http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css， 如下圖所示：
online_css.png - 然后生成的Html文件中就會引入該css，在任何聯網的電腦上都能正常顯示圖標
- 1中的方法需要聯網才能正常顯示圖標，如果我們想本地化，我們需要另行配置
-
按1中方法打開web fonts配置項，將url修改為本地資源所在位置，如下圖所示：
local_css.png -
Axure生成的Html結構如下圖所示，css等資源文件都在resources文件夾下：
html_structure.png - 所以我們要將下載的FontAwesome中的css文件，和fonts文件都拷貝到該文件夾下，以和我們上面配置的css文件路徑相符
- 注意css文件和fonts文件的相對路徑
幾點說明
- 我們在Axure中的配置主要是為了生成Html文件后能載入css文件并能正常顯示圖標
- 一定要將css文件和fonts文件都拷貝到生成的Html文件中，沒有fonts文件仍然不能顯示
- 使用其他的圖標字體和FontAwesome的使用方法一致
