[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`