iconfont如何运用到uniapp

使用iconfont分线上和本地2种方式

线上方式：

image.png

1、如图 复制网址，粘贴到浏览器中访问，记得加https: 得到css代码
2、在uniapp中新建一个icon.css，粘贴这些代码，如下图，在所有url的地方加上https:
3、app.vue中引入这个新建的icon.css @import "/common/icon.css";
4、组件中使用<view class="iconfont icon-down"></view>
，

线下方式：

1、下载图片获得压缩包，解压后删除多余文件，只需要保留如下图。放入uniapp项目中。

image.png

2、app.vue中引入文件中的iconfont.css @import "/common/iconfont.css";
3、修改iconfont.css文件，如下图。在所有url的地方加上/
image.png

4、组件中使用<view class="iconfont icon-down"></view>

如果更新了iconfont的图标库，无论线下或线上方式，都必须手动app.vue中引入的css代码
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容