uniapp 添加自定义图标

简介: uniapp 添加自定义图标

1. 下载自定义图标

在阿里图标库,选择喜欢的图标库

https://www.iconfont.cn/collections/index

建议按收藏数排序进行,能更快找到合适的图标

点开喜欢的图标库(如 Ant Design 官方图标库),将喜欢的图标添加到图标收集车(鼠标移动到喜欢的图标上时,会出现)

打开图标收集车

将图标添加到项目

将图标下载到本地

2. 将图标拷贝进项目

将下载的图标文件,拷贝到项目中的 static/font-icons 文件夹(若无则新建)

修改 static/font-icons/iconfont.css 中的路径

添加上图红色框的路径代码,以便项目能找到相关的图标文件

3. 将图标导入项目

在 App.vue 的 style 标签中导入

@import "@/static/font-icons/iconfont.css";

4. 在页面中使用自定义图标

pages/index/index.vue

<text class="iconfont icon-sync"></text>


目录
相关文章
|
5月前
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
200 0
|
5月前
uniapp自定义头部导航怎么实现?
uniapp自定义头部导航怎么实现?
|
5月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
147 0
|
3月前
|
安全
uniapp实战 —— 自定义顶部导航栏
uniapp实战 —— 自定义顶部导航栏
116 2
|
3月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
129 1
|
3月前
|
前端开发 JavaScript 索引
uniapp的u-album组件自定义删除功能
这样,你就可以在u-album组件中实现自定义的删除功能了。需要注意的是,这个删除操作只是在前端删除了图片项,并没有在后端删除对应的图片文件,如果你需要在后端也删除对应的图片文件,你还需要在删除操作后发送一个请求到后端,让后端删除对应的图片文件。
83 0
|
5月前
|
Web App开发 移动开发 文字识别
Uniapp或H5之ORC识别与自定义照相机
Uniapp或H5之ORC识别与自定义照相机
479 3
|
5月前
|
小程序 程序员
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
135 0
|
5月前
|
JavaScript API
uniapp自定义导航栏方法
uniapp自定义导航栏方法
538 0
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
下一篇
无影云桌面