uniapp中使用在线阿里图标库，注意不是本地使用

最新推荐文章于 2024-05-11 16:37:28 发布
最新推荐文章于 2024-05-11 16:37:28 发布
阅读量428 收藏 7
点赞数 10
文章标签： uni-app 前端 javascript html5 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46631078/article/details/136288897
版权

1.阿里图标库中我的项目中首先得有图标，

2.每次加入图标都需要更新阿里图标库中的代码，除非一次性添加完毕，一共两处，都需要复制

切记，复制代码到项目中，一定要在//前面加上https:否则不显示图标

第一张图片复制到uniapp项目中的iconfont.css文件中

第二张图片复制到App.vue中

文件中使用便是<text class="iconfont  icon-shezhi"/> icon-shezhi是阿里图标库中的class名，到此步骤，即可完成阿里图标库的在线使用

周bro
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp字体图标的使用
12-31
本文将深入探讨如何在uniapp中有效地使用字体图标。 一、字体图标概述 字体图标（Font Icons）是通过将图标转化为字体文件来实现的，它们以Unicode编码的方式存储，可以像文字一样调整大小、颜色和位置，而且不受...
uniapp 表格的介绍和使用
11-17
【uniapp表格组件详解】 uniapp表格组件是一个用于展示数据的布局工具，它由四个基本组件构成：uni-table（表格组件）、uni-tr（表格行）、uni-th（表格头）和uni-td（单元格）。这些组件协同工作，帮助开发者创建...
如何在uniapp项目引入阿里图标库的iconfont(线上)
最新发布
it_laowu的博客
05-11 842
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
在 uniapp 中使用阿里图标
糜家智の博客
07-05 4437
uniapp 使用阿里图标
uni-app：阿里巴巴图标库icon的使用步骤
weixin_46162592的博客
07-28 1838
记录一下在uni-app中使用阿里巴巴图标库icon的详细步骤
uniapp使用阿里巴巴图标库教程
m0_71386778的博客
01-11 1173
回到官网我的项目中，在Unicode下点击【暂无代码，点此生成】，将生成的代码替换掉iconfont.css里上面的部分，到这里代码就可以正常运行了~到这里就可以使用阿里的图标库了，如果要添加图标就添加图添加到已有的项目中，下载重新覆盖文件即可。4、点击【项目设置】，勾选字体格式： WOFF2\WOFF\EOT\SVG\BASE64，点击【保存】，保存后点击【下载至本地】3、将购物车中的图标【添加至项目】，点击【新建项目】，填写项目名称后点击【确定】，会自动跳转至“我的项目”界面。
uniapp使用阿里图标
m0_55333789的博客
08-02 1458
uniapp使用阿里图标
uniapp引入阿里巴巴矢量图标库
qq_60976312的博客
02-24 1895
uniapp引入阿里巴巴矢量图标库
uniapp中使用mathJax解析数学公式
03-15
为了提高性能和用户体验，可以考虑使用MathJax的延迟加载功能，或者使用本地存储缓存已渲染的公式。此外，使用Chrome开发者工具的移动模拟器进行调试，确保在不同设备上显示效果一致。 通过以上步骤，你就可以在...
uniAPP使用sqlite数据库demo
04-01
- 在uniAPP中使用SQLite，首先需要引入对应的插件，如`uniCloud sqlite`或`sqlite3`等。这些插件提供了与SQLite交互的API。 - 集成过程通常包括安装插件、初始化数据库、创建表、执行SQL语句等步骤。 4. **创建...
微信小程序里使用SVG矢量图标方法详解
10-17
在微信小程序开发过程中需要在小程序里使用SVG矢量图标,下面为大家分享2种在微信小程序中引入SVG矢量图标的方法
uniapp引用阿里图标库图标
weixin_42148384的博客
07-08 401
uiapp中引用阿里图标库图标，胎教级教程
uni-app（使用阿里图标）
小林的博客
03-28 1089
uni-app，使用自定义图标
阿里巴巴矢量图标库在uni-app中的使用方法
m0_58611644的博客
01-16 1263
2.打开下载到本地的项目文件，将箭头所指的四个文件放入项目的static目录下(可以新建个文件夹放入，方便管理)执行完后项目文件夹中会出现一个新的文件夹 iconfont-weapp 然后重复。3.打开iconfont.css文件，然后将顶部 @font-face{}第二种 Symbol中在图标上点复制代码 icon-icon-03_ji。替换为你的项目中Unicode下的 @font-face{}切换到刚才下载到本地的项目文件目录下执行该命令。中的2和4(只要该文件夹中的 .css文件)
uni-app 引入阿里巴巴矢量图标详细步骤
weixin_71273777的博客
01-15 2149
在 class 中定义 iconfont。注：除了以上步骤其他步骤均没有改变。
uni-app中使用阿里图标具体流程。
zhiqvyunxvci的博客
08-11 188
阿里矢量图标的三种使用方式整理（uniapp）
热门推荐
时翎的博客
02-11 1万+
iconfont-阿里巴巴矢量图标库 web端iconfont使用 引用方式： 1.unicode 引用 （不支持多色，支持按字体的方式去动态调整图标大小，颜色） 2.font-class 引用 （unicode使用方式的一种变种，语意明确，容易分辨是哪个icon，本质上还是使用的字体，所以多色图标还是不支持的） 3.symbol 引用（全新的使用方式，未来的主流，推荐用法。支持多色图标、支持像字体那样来调整样式） 兼容性 unicode >...
uniapp项目中使用阿里图标
chedannaxieshang的博客
03-07 1530
一、uniapp引入阿里图标 1、第一步：选择想要的图标加入购物车 注意：批量注入的方法（按F12 在console里面输入下方的代码） var span = document.querySelectorAll('.icon-cover'); for (var i = 0, len = span.length; i < len; i++) { console.log(span[i].querySelector('span').click()); } 2、点击下载图标 3、下载之后,只
uniapp小程序如何在线引入阿里图标库
05-20
要在uniapp小程序中引入阿里图标库，您可以按照以下步骤操作： 1. 在您的uniapp小程序项目中找到 `App.vue` 文件，然后在该文件中加入以下代码： ```html <!-- 引入阿里图标库 --> <iconfont class="ali-icon" :style="{ fontFamily: 'iconfont' }"></iconfont> ``` 2. 在 `static` 目录下新建一个文件夹（例如 `iconfont`），将您下载好的阿里图标库文件（例如 `iconfont.ttf`）放到该文件夹中。 3. 打开阿里图标库官网，选择您需要的图标并添加到购物车中。在购物车页面下载图标代码包。 4. 解压缩下载的图标代码包，找到 `iconfont.css` 文件并复制其中的 CSS 代码。 5. 在您的 `App.vue` 文件中加入以下代码，将阿里图标库的 CSS 样式引入： ```html <style> @font-face { font-family: 'iconfont'; src: url('static/iconfont/iconfont.ttf') format('truetype'); } .ali-icon { font-size: 32px; color: #333; } /* 将从阿里图标库官网下载的 CSS 代码粘贴到这里 */ </style> ``` 6. 在粘贴的 CSS 代码中，将所有的 `font-family` 属性值改为 `iconfont`，以便与上面的 `@font-face` 代码相对应。 7. 至此，您已经成功将阿里图标库引入您的uniapp小程序项目中了。可以在需要使用图标的地方使用 `<iconfont class="ali-icon">&#x图标代码;</iconfont>` 的方式来使用阿里图标库中的图标。其中，`&#x图标代码;` 表示要使用的图标的代码，可以在阿里图标库官网上找到对应的代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值