【uni-app】uni-app引入自定义图标iconfont

最新推荐文章于 2024-07-24 22:09:51 发布
最新推荐文章于 2024-07-24 22:09:51 发布
阅读量712 收藏 3
点赞数 2
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42345108/article/details/109829713
版权

1.下载图标，下载完成的目录如图

2.在项目目录的static下创建icon目录，将上面选中的iconfont相关文件全部复制到icon目录

3.修改iconfont.css中的文件引入方式，不改的话会报错

如图，改成圈中的方式，注意未圈中的data:application不要改

4.在App.vue中引入图标

5.使用方法

sqwu
关注
专栏目录
在Uni-app中使用自定义图标
祈澈菇凉
10-18 532
使用矢量图标字体或图标库来添加自定义图标。一些常见的方法：1：使用矢量图标字体:矢量图标字体库，如Font Awesome、Material Icons等。将矢量图标字体文件（通常是.ttf或.otf格式）添加到项目中。需要使用图标的地方，使用相应的类名来渲染图标。</style>添加自定义字体文件。用相应的类名来渲染图标。
uni-app引入自定义图标库
weixin_44433499的博客
07-21 904
1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 方法一： 2.在项目根目录下创建common目录，并把iconfont.css文件放入common目录中 3.修改iconont.css里的@font-face（保留base64字体图标） 删除划线部分，保留结尾分号。 删除后： @font-face {font-family: "iconfont"; src:url('data:application/x-font-woff2;charset=utf-8;base64,d09
uniapp 自定义图标icon
热门推荐
m0_46554818的博客
08-06 1万+
uniapp 自定义图标 超级简单准备工作： 例如上边的图标，我们发现都是蓝白切换，这时候用img整个项目就太大了，占内存，这是我们可以把他做成uniapp内置的icon图标。 准备工作： 1.先把图片以svg格式导入阿里图标库（用ps把png格式图片转化成svg格式没用，这一步可以让设计直接上传阿里图标库，提前把png图片命名好发给设计部） 类似这种 （其实白色的精灵图可以不用命名） 2.去uniapp插件市场下载 iconfont 插件（iconfont插件） 下载好放入文件的组件部分，如下图：
uni-app/vue 引入自定义图标库——Iconfont-阿里巴巴
leyu_miss的博客
01-11 470
uni-app引入自定义图标库——Iconfont-阿里巴巴前言1.首先在[官网](https://www.iconfont.cn/)登录注册，选择你需要的图标加入购物车，可以多选2.新建项目，把购物车中的图标添加到项目，然后点击下载至本地3.解压后的文件如图所示，复制iconfont.css文件，粘贴到我们项目的static（或common）目录下，重命名为iconfont.scss(或者直接可以copy过来)4.打开我们复制过来的css文件，把里面引用了但是我们没有复制过来的文件的那几行删除掉（留下da
uniapp引入自定义图标
最新发布
weixin_52102740的博客
07-24 685
uniapp自定义图标
uniapp 使用自定义icon图标
黎小小的博客
05-29 5281
注意如果时vue3需要 slot用在节点中。
uniapp 添加自定义图标
朝阳39的博客
12-28 1265
/启动项目，效果如下。
uni-app中使用自定义图标库
qq_43579525的博客
06-30 7986
方法一： 1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 2.在项目根目录下创建common目录，并把iconfont.css文件放入common目录中 3.修改iconont.css里的@font-face（保留base64字体图标） 3-1：未修改前是这样 @font-face {font-family: "iconfont"; src: url...
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue...
uniapp框架-uni-app自定义导航栏-uni-app项目源码-vue语法格式.zip
05-21
从多级选择器到自定义导航栏，再到二维码生成器，UniApp的控件封装合集为开发者提供了极大的便利。 面向未来，UniApp将继续优化性能，拓展功能，满足更多开发者的需求。如果你正在寻找一个高效、便捷的跨平台开发...
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app-小程序自定义底部菜单样式示例
08-12
1. 在主项目的全局配置文件（main.js或app.vue）中引入自定义底部导航组件，并将其设置为全局组件。 ```javascript // main.js import customTabBar from '@/components/custom-tab-bar.vue'; Vue.component('...
uni-app自定义弹窗组件指令部分，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件指令部分，支持自定义图片，文本、按钮等功能。
uni-app使用iconfont自定义图标
薛定喵君的博客
02-23 2367
记录下如何在uni-app中使用自定义图标 图标库准备uni-app组件修改页面引用组件# 图标库准备 1.注册阿里巴巴图标矢量库账号 2.选择顶部菜单图标管理-我的项目后新建项目 3.在新建的项目中添加自己喜欢的图标 4.点击查看在线链接，获取在线图标链接代码 如果没有链接则根据提示生成在线链接代码 获取生成后的链接代码 # uni-app组件修改 基于官方的m-icon组件进行修改 m-ico...
uni-app为组件uni-icons添加自定义图标
豆。的博客
11-03 2166
步骤 1.将自定义的图标上传到 [阿里字体图标库 https://www.iconfont.cn/search/index ] （这里要以 SVG 格式上传），或者借鉴的图标,，然后将代码下载下来, 接下来要用到下载的 ttf 文件。 (1) 上传或者添加别人的图标 上传 添加别人的图标 (2) 下载文件 (3) 得到ttf文件 2.进入 uni-App 官方图标界面, 打开控制台 Network 模块, 过滤出字体的请求信息, 点击下载 ttf 文件(在ttf文件那右键 点open in new
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 5100
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
关于Uni-app引入icon的学习
沙雕JavaScripter的博客
08-04 764
关于Uni-app引入icon的学习 链接：https://blog.csdn.net/gyueh/article/details/106792103?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachine
uni-app引入阿里巴巴矢量库图标后，顶部导航栏显示小方块
qq_36904182的博客
03-24 1549
引入阿里巴巴矢量图标库 首先在阿里巴巴创建项目，拥有图标 具体引入方法参考： [https://blog.csdn.net/Dream_Weave/article/details/88550978?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task]...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值