一、前言
引入字体库图标iconfont
可以提高开发效率和项目的可维护性。阿里巴巴矢量图标库iconfont
无疑是最佳的选择之一,今天就介绍下在uniapp
中如何优雅的引入。
二、引用步骤
1. 注册登录
- 在官网注册登录
2. 创建项目
- 顶部操作栏的 资源管理 -> 我的项目 -> 新建项目
3. 搜索图标,添加入库
- 搜索图标,添加入库,选中的图标会在右上角的购物车图标上标识选中的个数
4. 选中图标添加进项目
- 点击右上角购物车图标,将选中图标添加进项目
5. 复制生成的CSS代码
- 确定添加项目,会自动进入该项目
- 点击红色字体
暂无代码,点击生成
- 生成代码后会有个css的链接,点击该链接,会在新窗口打开
6. 全选复制到uniapp
项目中
7. 注意点
- 网络路径必须加协议头
https
。具体可参考uniapp-字体图标 - 单位改为
rpx
8. 引用并使用
- 在
App.vue
中引用
<style lang="scss">
@import "@styles/iconfont.scss";
</style>
- 在文件中使用。
iconfont className
<text class="iconfont iconrenshu"></text>