本文主要講如何在AngularCli生成的項目中使用字體圖標。
一 SVG圖標准備
將需要轉換為字體圖標的圖片轉換為SVG格式。
這個讓項目視覺設計師搞定即可。
二 SVG圖標轉Font
可以通過IconMoon網站提供的在線app實現SVG圖標轉Font字體文件。詳細步驟如下：
步驟1：打開瀏覽器輸入IconMoon官網，進入網站后，點擊右上角紫色IcoMoonApp
說明：網站地址： https://icomoon.io/
注意：及時清除默認庫圖標，否則會對導入字體圖標引入干擾
步驟2：點擊左上角紫色圖標ImportantIcons,導入所有的SVG圖片文件。
Yes（代表要按原來圖標順序排序）；No（代表要重新按照庫已有排序），主要區別在於當前庫是否有圖標，否則會影響順序。如若沒有圖標（之前圖標清零），無影響。導入新增圖標（XXX.svg）文件，步驟如上。
步驟3：點擊右下角Generate Font進入圖標詳細編輯頁面。
點擊圖標，對於其進行屬性設置：
設置tags和names，盡量為英文簡寫，設置好，后關閉頁面，檢查順序是否有序，盡量別空位，保證以后可以和入更多圖標。
步驟4：設置字體文件名字和class前綴，點擊右下角Download旁邊配置齒輪圖標：
在打開的配置界面，完成Fony Name和Class Prefix配置，如下圖：
步驟5：點擊右下角Font download，完成字體圖標文件下載。
三 將Font文件引入AngularCli項目
上邊步驟中下載下來的Font壓縮文件目錄如下：
我們要用到的主要是fonts文件夾下文件和style.css，按下邊步驟完成將這些文件合入AngularCli項目。
1）首先將fonts文件夾直接拷貝到AngularCli項目的assets目錄下：
2）在AngularCli項目的src目錄下，新建font.less文件，將style.css中內容拷貝到font.less中，並修改最上邊@font-face中引用字體圖標文件的路徑：
3）在AngularCli項目中src目錄下的styles.less中，引入font.less：
四 引用和使用字體圖標
在font.less中有對應圖標的class，可以在DOM中直接添加這些class就可以顯示對應的圖標。
示例：
如下是font.less中的圖標樣式類：
1 .dp-fontDLI:before { 2 content: "\e903"; 3 color: #ffa55f; 4 } 5 .dp-fontDWS:before { 6 content: "\e904"; 7 color: #54aefb; 8 }
在HTML中使用：
1 <div class="dp-fontDWS"></div> 2 <div class="dp-fontDLI"></div>
顯示效果：
五 后續更新字體圖標
新增圖標步驟：
1）將之前的字體圖標文件中的.svg文件導入到IconMoon 網站中；
2）將新增圖標的SVG文件導入到IconMoon網站中；
3）選擇之前的圖標和新增圖標，生成和下載Icon（詳細步驟略過，請查看上邊詳細說明）。
參考資料&內容來源
IconMoon官網：https://icomoon.io/