uni-app引入阿里图标

最新推荐文章于 2024-03-28 10:00:12 发布
最新推荐文章于 2024-03-28 10:00:12 发布
阅读量2.3k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/monk96/article/details/102898355
本文详细介绍了如何在uni-app项目中使用阿里图标库，包括下载、配置及页面引用等步骤，帮助开发者轻松实现多端应用图标需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

个人博客

今天刚好用uni-app在开发一个多端应用，在开始引用图标时不知道如何引入多端应用的图标，后来用阿里图标解决了，在此记录下解决的方法

  1. 去阿里图标官网下载阿里图标，选择unicode
    在这里插入图片描述

2.复制代码，在app.vue粘贴，注意：将链接都加上https
在这里插入图片描述
在这里插入图片描述
3.在main.js中引入下载的字体文件，一般放在static下
在这里插入图片描述
4.在页面中引用
在这里插入图片描述
大功告成
在这里插入图片描述

如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 3125
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
uni-app引入自定义图标库
weixin_44433499的博客
07-21 1023
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
uni-app（使用阿里图标）
小林的博客
03-28 1803
uni-app，使用自定义图标
uniapp使用阿里巴巴图标库教程
m0_71386778的博客
01-11 2147
回到官网我的项目中，在Unicode下点击【暂无代码，点此生成】，将生成的代码替换掉iconfont.css里上面的部分，到这里代码就可以正常运行了~到这里就可以使用阿里的图标库了，如果要添加图标就添加图添加到已有的项目中，下载重新覆盖文件即可。4、点击【项目设置】，勾选字体格式： WOFF2\WOFF\EOT\SVG\BASE64，点击【保存】，保存后点击【下载至本地】3、将购物车中的图标【添加至项目】，点击【新建项目】，填写项目名称后点击【确定】，会自动跳转至“我的项目”界面。
uniapp 引入阿里iconfont图标并使用
rain__chen的博客
07-17 2106
1、找到需要的图标 2 添加到库 3 4 添加到项目，没有项目的话要先建项目 5 6、将css文件复制到uniapp项目中 7、生成代码，替换url 8、使用 在要使用的页面导入
uniapp引入iconfont(阿里图标库)
曳猫的博客
04-28 1859
uni引入阿里图标库(iconfont) 1 首先找到自己要的图标 2 添加入库 3 添加到项目（选择或者新建项目添加） 4 下载到本地 5 解压下载的压缩包 6 复制iconfont.css 到项目 复制到项目的common 7 iconfont.css文件添加 以下代码 text[class*="icon-"], view[class*="icon-"], button[class...
使用uni-app搭建的企业OA app
03-23
在实现企业OA app的功能时，开发者可能会用到uni-app的组件如`uni-forms`（表单）、`uni-grid`（网格）、`uni-swiper`（轮播图）等，以及uniCloud（阿里云提供的云端服务）来实现数据的存储和同步，确保多平台的数据...
【uniapp引入阿里字体图标】
ytfty24124的博客
10-28 666
nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。
移动应用开发——基于uni-app框架
m0_61839930的博客
06-17 1339
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，
uni-app引入阿里云矢量图标库
tianxingege_的博客
09-07 321
这段时间因为任务要求，要做一个小程序，所以开始学一下uni-app开发，现在写一下关于引入阿里云矢量图标库的方法 添加图标 首先去阿里巴巴矢量图标库选择你喜欢的图标 你可以在这搜索你想要的图标，选择好之后便把他添加到红色小车里 然后选择添加至项目（没有的可以自己建一个） 添加图标 进去我的项目之后，将下面的链接在浏览器打开。 也可以下载本地 把文件放到static里面 在index.html里面引入 ...
uniapp引入阿里图标
dtbk123的博客
10-18 646
在page.json里的配置项 { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "titleNView":{ "buttons":[{"fontSrc":"/sta...
uniapp开发App如何引入阿里巴巴矢量库图标
SSophia的博客
11-08 3397
uniapp开发App如何引入阿里巴巴矢量库图标
uni-app 引入阿里巴巴矢量图标详细步骤
weixin_71273777的博客
01-15 2582
在 class 中定义 iconfont。注：除了以上步骤其他步骤均没有改变。
在 uniapp 中使用阿里图标
糜家智の博客
07-05 4776
uniapp 使用阿里图标
uni-app引入iconfont阿里图标
只有一的博客
01-07 265
选择好图标， 添加进项目， 然后从iconfont官网下载文件： 下载好后,打开压缩包，打开里面的iconfont.css文件 4.把文件复制到项目里，这里我放在了common文件夹下 5.删除上图的蓝色框内的数据，只剩下如下图所示 6.加上src以及";" 7.引入样式，这里我在App.vue中引入为全局样式 8.使用图标 组件内使用 红色框里的数据是必填 9.效果 ...
uniapp使用阿里图标
m0_55333789的博客
08-02 1582
uniapp使用阿里图标
uniapp中引入阿里图标
GeniusMao的博客
08-17 608
一.在uniapp中发现，以往H5的阿里使用步骤失效了： 1.把图标加入购物车，在购物车里添加至项目，选择下载至本地 2.把文件夹里除了html和demo的全部粘贴至软件 3.link引入iconfont.css,在html文件中查看图标编码 4.<i class="iconfont">图标编码</i> 用i.iconfont{ fontsize}调整图标大小或者用类 <i class="iconfont 类名"> </i> 或伪类 li：：befo.
uni-app引入阿里图标【单色】
Chona
11-11 1565
uni-app引入阿里图标【单色】 上期简单的介绍了一下uni-app相信大家根据官方文档都已经了解的差不多了，创建项目应该是没有什么问题了，那么这期我就讲一下在uni-app怎么引入阿里图标——单色 之前文章中我有讲到小程序原生引入阿里图标，如果大家感兴趣的话可以看一下。uni-app引入阿里图标和小程序原生引入还是很不一样的 话不多说，开始！ 第一步：进入阿里图标官网https://www.iconfont.cn/选择自己需要的图标，当然你也可以让你们ui把设计图上的图标上传到阿里图标上 第二步：添加
uniapp使用阿里icon详细步骤
qq_33444716的博客
03-30 4330
1. 首先登录阿里icon,然后找到你想要用的图标全部加入到购物车，并且点击购物车，添加到相应的项目 2. 找到对应的icon项目，点击下载至本地 3.将红框框起来的文件放到项目中 4. 创建一个iconfont.css，做以下处理 @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src:url('~@/static/font/iconfont.ttf') forma.
Wot Design Uni 引入阿里图标
最新发布
03-14
用户提到在uni-app中引入阿里图标的方法，包括下载图标库、安装工具生成CSS文件，并在组件中使用类名。但用户现在想知道如何在Wot Design Uni中实现这一点。 首先，我需要确认Wot Design Uni是否基于uni-app，因为...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东哥aigc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值