uni-app如何引入本地的字体图标iconfont

uniapp引入本地iconfont图标的步骤：

1.去https://www.iconfont.cn/ 下载自己需要的字体图标，下载下来之后，在static目录下面新建fonts,放进去刚下载下来的文件，解压复制文件夹里面的相关文件，比如下图，把这些文件放到你新建的fonts里面；

2.然后在App.vue文件中的style 引入css路径，@import './static/fonts/iconfont.css';

3.修改iconfont.css文件中的引入路径，在改样式中修改@font-face中的路径，比如在所有url里面的iconfont的前面添加路径~@/static/font/ ，如下图显示：

4.在任意的页面中使用方式为：

<view class="iconfont icon-XXX"></view>

 

按照以上步骤就可以完成图标的引入，就能在uni项目中显示出来了。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/653

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！