[toc] # 1.4 引入矢量圖標庫 ## 1.4.1 阿里巴巴矢量圖標庫的使用 * 圖標的搜索 * 圖標的添加 * 圖標顏色的更改 * 圖標的下載 * 圖標的使用 ## 1.4.2 在項目導入下載好的矢量圖標庫樣式文件 * 將下載好的矢量圖標庫文件拷貝到common文件夾內 * 在App.vue文件內進行導入 ``` /* #ifndef APP-PLUS-NVUE*/ @import url("./assets/style/icon.css"); /* endif */ ``` * 如果控制臺出現報錯,刪除以下用紅框標記起來的內容:  * 測試字體圖標能否使用 ``` <text class="iconfont icon-shoucang" style="font-size:200rpx"></text> ``` ## 1.4.3 nvue頁面引入字體圖標庫 * 參考地址: [nvue頁面引入字體圖標庫](https://weex.apache.org/zh/docs/modules/dom.html#getlayoutdirection)  * 在App.vue頁面的onLanuch鉤子里面引入dom和字體圖標 ``` <script> export default { onLaunch: function() { const domModule = weex.requireModule('dom') domModule.addRule('fontFace', { 'fontFamily': "iconfont", 'src': "url('http://at.alicdn.com/t/font_1859985_7mxozsfdvib.ttf')" }); }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } } </script> ``` * 將index.vue改成index.nvue,測試字體圖標能否引入成功 ``` <template> <view> <text class="iconfont">&#xe62b;</text> </view> </template> ``` `注意: nvue里面引入字體圖標的方式采用Unicode, vue里面引入字體圖標的方式采用Font class`