uni-app引入阿里图标

最新推荐文章于 2024-05-11 16:37:28 发布
原创 最新推荐文章于 2024-05-11 16:37:28 发布 · 2.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uniapp

本文详细介绍了如何在uni-app项目中使用阿里图标库，包括下载、配置及页面引用等步骤，帮助开发者轻松实现多端应用图标需求。

个人博客

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

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

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

uni-app（一）----引入阿里云矢量图标库
chongzi的博客
10-11 2940
这段时间因为老师要求，要做一个小程序，所以开始学一下uni-app开发，现在写一下关于引入阿里云矢量图标库的方法 下载图标 首先去官网选择你喜欢的图标 你可以在这搜索你想要的图标，选择好之后便把他添加到红色小车里 然后选择添加至项目（没有的可以自己建一个） 添加图标 进去我的项目之后，将下面的链接在浏览器打开。 在Hbuilder中你创建的项目里新建一个css文件，将刚刚在浏览器打开的样式复制进去： 接下来就在App.vue中引入： 然后在布局中使用： <icon class="ico.
uni-app引用阿里巴巴官方图标库
二十岁的程序员想搞钱
05-09 1024
最近在学习uni-app时，需要用到阿里巴巴的官方图标库，图标全部导入项目会使项目运行缓慢，因此使用网络路径的方式 目录1.阿里巴巴图标库2.引入文件3.使用图标4.总结 1.阿里巴巴图标库 本节主要介绍如何在阿里巴巴图标库中查找图标并将其加入项目； 阿里巴巴矢量图标库网址如下阿里巴巴图标库，进入后点击官方图标库 进入官方图标库后，点击第一个图标库 由于挨个点击加入项目比较麻烦，这里在控制台输入以下代码： var iconList = document.querySelectorAll('.icon-g
uni-app（使用阿里图标）
小林的博客
03-28 1938
uni-app，使用自定义图标
uniapp使用阿里巴巴图标库教程
m0_71386778的博客
01-11 2397
回到官网我的项目中，在Unicode下点击【暂无代码，点此生成】，将生成的代码替换掉iconfont.css里上面的部分，到这里代码就可以正常运行了~到这里就可以使用阿里的图标库了，如果要添加图标就添加图添加到已有的项目中，下载重新覆盖文件即可。4、点击【项目设置】，勾选字体格式： WOFF2\WOFF\EOT\SVG\BASE64，点击【保存】，保存后点击【下载至本地】3、将购物车中的图标【添加至项目】，点击【新建项目】，填写项目名称后点击【确定】，会自动跳转至“我的项目”界面。
如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 3282
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
uniapp 引入阿里iconfont图标并使用
rain__chen的博客
07-17 2211
1、找到需要的图标 2 添加到库 3 4 添加到项目，没有项目的话要先建项目 5 6、将css文件复制到uniapp项目中 7、生成代码，替换url 8、使用 在要使用的页面导入
uniapp引入iconfont(阿里图标库)
曳猫的博客
04-28 1966
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（阿里云提供的云端服务）来实现数据的存储和同步，确保多平台的数据...
uni-app引入自定义图标库
weixin_44433499的博客
07-21 1074
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引入阿里字体图标】
ytfty24124的博客
10-28 713
nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。
uniapp引入阿里图标
dtbk123的博客
10-18 666
在page.json里的配置项 { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "titleNView":{ "buttons":[{"fontSrc":"/sta...
uniapp开发App如何引入阿里巴巴矢量库图标
SSophia的博客
11-08 3463
uniapp开发App如何引入阿里巴巴矢量库图标
uni-app 引入阿里巴巴矢量图标详细步骤
weixin_71273777的博客
01-15 2708
在 class 中定义 iconfont。注：除了以上步骤其他步骤均没有改变。
在 uniapp 中使用阿里图标
糜家智の博客
07-05 4808
uniapp 使用阿里图标
uni-app引入iconfont阿里图标
只有一的博客
01-07 281
选择好图标， 添加进项目， 然后从iconfont官网下载文件： 下载好后,打开压缩包，打开里面的iconfont.css文件 4.把文件复制到项目里，这里我放在了common文件夹下 5.删除上图的蓝色框内的数据，只剩下如下图所示 6.加上src以及";" 7.引入样式，这里我在App.vue中引入为全局样式 8.使用图标 组件内使用 红色框里的数据是必填 9.效果 ...
uniapp使用阿里图标
m0_55333789的博客
08-02 1698
uniapp使用阿里图标
uniapp中引入阿里图标
GeniusMao的博客
08-17 632
一.在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 1615
uni-app引入阿里图标【单色】 上期简单的介绍了一下uni-app相信大家根据官方文档都已经了解的差不多了，创建项目应该是没有什么问题了，那么这期我就讲一下在uni-app怎么引入阿里图标——单色 之前文章中我有讲到小程序原生引入阿里图标，如果大家感兴趣的话可以看一下。uni-app引入阿里图标和小程序原生引入还是很不一样的 话不多说，开始！ 第一步：进入阿里图标官网https://www.iconfont.cn/选择自己需要的图标，当然你也可以让你们ui把设计图上的图标上传到阿里图标上 第二步：添加
uniapp使用阿里icon详细步骤
qq_33444716的博客
03-30 4372
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.
uni-app找图标的
最新发布
03-04
一种更为便捷的做法是从阿里巴巴提供的在线平台挑选合适的图标集合作为公共资源引入项目内。主要步骤概括如下： - 访问 [IconFont](https://www.iconfont.cn/) 官网选取目标图标，并将其加入购物车； - 下载所选...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

东哥aigc

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

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

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

打赏作者

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

抵扣说明：

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

余额充值