## 自定義icons的設置 1. 介紹: 現在基于css font-face的字體圖標越來越流行。?這種圖標具有矢量圖的特點，可以不失真的自由縮放，還可以通過css來設置圖標的顏色，還有就是網絡上資源特別豐富。X5系統自帶了數百個字體圖標， 用戶還可以通過配置使用自己下載的字體圖標， 下邊就介紹一下具體的使用方法。 2. 首先以fortawesome 網站為例（網址：[http://fortawesome.github.io/Font-Awesome](http://fortawesome.github.io/Font-Awesome "http://fortawesome.github.io/Font-Awesome")/） [](http://wex5.com/cn/wp-content/uploads/2015/05/fa1.jpg) 1. 打開fortawesome首頁， 下載資源，解壓縮到X5系統目錄 model/UI2/(your dir)下， 解壓后目錄結構是這樣的： [](https://box.kancloud.cn/2015-09-23_56018ec112c9d.jpg) 2. 然后修改font-awesome.css文件名為fa.icons.css， 如果你希望使用壓縮的文件， 就把font-awesome.min.css 文件名改為fa.icons.css。[](https://box.kancloud.cn/2015-09-23_56018ec16365e.jpg) 3. 然后在功能中window組件上右鍵，增加css資源，在選擇器中選擇fa.icons.css文件，完成后在組件樹上會增加resource/require節點。如下圖。[](https://box.kancloud.cn/2015-09-23_56018ec1be88b.jpg)[](https://box.kancloud.cn/2015-09-23_56018ec7223fc.jpg) 4. 現在icons資源已經引入好了，可以在組件中使用字體圖標了， 比如打開button的icon屬性選擇器， 在下拉列表中就會多一個fa選項，切換到這一條就可以選擇fortawesome的字體圖標了。[](http://wex5.com/cn/wp-content/uploads/2015/05/iconSelector.jpg) 5. 在功能運行的時候，X5系統會自動加載fa.icons.css 3. 問題解答： 1. 為什么需要修改css文件名，以及修改的規則？ X5系統需要分析css文件中包含哪些字體的class， 需要知道icon class 的前綴，然后才能把它們找出來。我們約定xxx.icons.css的xxx為class前綴標識。以fortawesome字體庫為例，它的字體圖標 class 都是以fa開頭的，如fa-user；fa-cog等，所以文件名就改為了fa.icons.css。