小程序中使用阿里巴巴矢量图

最新推荐文章于 2024-09-19 09:51:09 发布
最新推荐文章于 2024-09-19 09:51:09 发布
阅读量220 收藏
点赞数 1
分类专栏： 阿里巴巴使用方法 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_57792333/article/details/120003654
版权

图标寻找完毕后

使用 Font class 方法

请添加图片描述

点击css 代码进入 新的页面

请添加图片描述

复制后，粘贴到 小程序的wxss文件 中

在这里插入图片描述

pages 页面可以 通过 引入 该 wxss文件 来使用

@import '/styles/icon.wxss'

引入后 通过 写对应的 class 名 来使用

使用 ’ 送货车 ‘ 图标

// 将图标 对应的 class 写进去
<view class="iconfont icon-songhuoche"></view>

效果展示
在这里插入图片描述

如何在微信小程序中使用阿里巴巴矢量图
weixin_56733569的博客
12-16 1715
在微信小程序中使用阿里巴巴矢量图
[小程序]——解决阿里矢量图引入问题
虽菜但瘾
03-08 707
选择矢量图 找到我们项目中需要的矢量图，然后添加入库 添加项目 选择完之后可以添加到项目 没有文件夹可以新增 生成代码 之后就可以选择Unicode方式 这里需要生成代码，原因就是下载之后的文件是本地相对路径，而使用代码替换之前的路径就能选择网络路径，这样就能减少项目的大小。 下载 下载至本地后查看文件夹 这是我的下载项目，然后选择iconfont.css，删除之前相同的代码，将生成的代码添加进去。 导入项目 将文件后缀改为 .wxss ，粘贴到项目文件中，在app.vue中全局引用 <s
微信小程序里使用阿里巴巴矢量图标
bangshuangtun2328的博客
02-24 202
登录阿里巴巴矢量图标（https://www.iconfont.cn） 选中图标，加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式： 1）不转换成base64的文件 找到 iconfont.css 文件，直接复制出来粘贴在微信小程序的wxss 文件内 再在小程序的wxml 里引用类 2）转换成bas...
小程序使用阿里巴巴矢量图标库
m0_71774042的博客
04-23 1277
最后点进网址，复制到自己的app.wxss中。点击项目后进入下一步骤。
小程序如何引入阿里巴巴矢量图
weixin_33912246的博客
11-29 391
学习链接：1、https://blog.youkuaiyun.com/hknishi_zs/article/details/80694681 2、https://blog.youkuaiyun.com/qq_29944285/article/details/79562954 转载于:https://www.cnblogs.com/studyh5/p/10039360....
微信小程序使用阿里巴巴矢量图
m0_56654689的博客
08-15 514
【代码】微信小程序使用阿里巴巴矢量图。
微信小程序引用阿里巴巴矢量图标.zip
09-04
在微信小程序开发中，引入阿里巴巴矢量图标库是一种常见的需求，尤其对于提升用户界面的美观度和一致性至关重要。本文将详细介绍如何在微信小程序中引用阿里巴巴矢量图标，并讲解相关技术要点。 首先，阿里巴巴矢量...
uniapp 引入阿里巴巴矢量图
wy_319的博客
11-17 2358
1、先在阿里巴巴矢量图网站添加自己喜欢的图标（网址：iconfont-阿里巴巴矢量图标库） 每完成红箭头的第一步 右上角购物车会增加一条 2、选择完成后，点击右上角的购物车会出现以下界面 3、选择添加至项目，没有项目的话，箭头位置新建，然后确定 4、 确定后跳转至以下界面，并且点击“下载至本地” 5.找到下载的文件，把其中的：iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2 放在static下的iconfont(新建)..
微信小程序使用彩色图标（阿里巴巴矢量图标库）（炒鸡详细）
mycocoo的博客
08-08 3030
前言废话 本来一直都是用的阿里巴巴矢量图标库中的单色图标，那样就简单，把素材代码文件下载一下，再复制到项目文件里就行了。可是前几天突然有个需求是用彩蛇图标当用户的头像，我以为按照原来的操作可行，结果原来可可爱爱的图标变成了一个黑色圆点。这可愁死我了，于是马上问度娘，原来是要下载插件，最后顺利的完成了需求。现在有空了就来整理一下操作顺序，希望能帮到像我几天前那样的小伙伴。 配置环境变量 如果已经安装过nodejs的小伙伴自动跳过 第一步，下载安装nodejs 1、下载 我的电脑是windows10 64位的
微信小程序——引入 iconfont 矢量图标，如何使用引用阿里巴巴矢量图标
通往成功之路的一个过客
09-19 1863
本文介绍如何在小程序中加入图标，如何使用引用阿里巴巴矢量图标
微信小程序-组件和样式（4）字体图标之阿里巴巴矢量图标库的使用
weixin_42284031的博客
05-31 1033
阿里巴巴矢量图表库的网址：阿里巴巴矢量图标库 在搜索框输入我们需要的图标文本，比如首页/配送/时间等，就会搜索到各种文本图标： 选中文本图标，点击购物车，选择项目： 可以编辑首页项目，比如icon class的名称： 点击生成在线链接，点击.css链接查看生成的CSS代码 二.在微信小程序中使用阿里巴巴矢量图标库 2.1 创建矢量图标库文件夹和文件 注意：在引用之前需要在全局.scss文件里引用矢量.scss文件，使用@import关键字 三.常见错误及解决办法 官网解释，这种错误不影响小程序
支付宝小程序使用阿里图标库
weixin_40888956的博客
05-07 1669
第一步：先下载阿里图标库字体 第二部：https://transfonter.org/进入这个网址把iconfont.ttf文件转成base64 encode格式的编码文件，转后有三个文件只用其中两个 第三部：把生成的文件中的stylesheet.css改成acss文件 第四部：在自己要用的支付宝小程序中创建static文件在static文件中创建ali-icon文件，再...
小程序导入阿里巴巴矢量图标库图片
笑到世界都狼狈的博客
01-02 635
1.打开阿里巴巴矢量图标库：iconfont-阿里巴巴矢量图标库 2.将自己项目中需要的图片加入购物车 3.点击添加至项目 4.新建项目 5.生成在线链接 6.生成代码 7.小程序中新建wxss，将代码粘贴进去 8.全局样式中导入 9.页面中使用 ...
在小程序中使用阿里巴巴矢量图标库-代码版
m0_61204947的博客
05-18 818
阿里巴巴-iconfont 首先请自行注册-这个是必须要的 1.找到自己想要的图标,鼠标移动到图标上,点击添加到库 2.选择完之后,点击右上角的购物车图标 3然后在右侧点击添加至项目 4.在 资源管理-我的项目 中可以找到个人主页的项目 这里主要说下Unicode的转换 开始进入时,会自动生成代码,如果没有,则点击红色字体,暂无代码点击生成 在自己的项目中新建文件夹styles下文件iconfont.css 把代码复制进来 修改代码 src: url(''); src: url('..
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
m0_59971110的博客
02-02 2396
将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中。搜索想要的矢量图标并加入购物车，点击右上角购物车。将字体格式设置为TTF Base64。在app.wxss中引入文件。在微信小程序中新建文件夹。将矢量图复制到class中。更改后缀名为wxss。
在小程序中使用阿里巴巴矢量图标库
不定时分享最优质的网络技术与教程，满满的干货。
12-11 711
调用的方法有很多种，根据自己项目的实际使用标签来调用，没必要非要使用 i 标签。
小程序使用阿里矢量图2.0
wangjuhi的博客
05-20 939
之前写的使用阿里矢量图感觉有点麻烦 去阿里矢量图创建项目，点击font class 复制链接 新窗口打开直接复制或下载文件 去小程序新建文件粘贴或直接拷贝刚才下载的文件（后缀改为.wxss） 需要引入的wxss页面引入 页面书写 第二个class名为使用图标的名字 #### 下次有新的图标添加，直接替换icon.wxss 文件就可以了 全局引入wxss，没有尝试，至少分包中直接引入是不可行的，感兴趣的话可以试试 ...
小程序引入阿里矢量图
小河流水
03-15 6392
大家好，又和大家见面了，今天给大家分享的是小程序如何引入阿里矢量图库，现在想想已近迫不及待拉吧，那么大家跟我来吧！ 1、准备：阿里矢量图 http://iconfont.cn/help/detail?helptype=draw 2、下载选好的矢量图 3、查看下载项目并解压 编辑iconfont.css @font-face {font-family: "ico...
微信小程序里面引用阿里巴巴矢量图（6月份系统升级维护后）
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
06-14 1828
微信小程序引入阿里巴巴矢量图，6月份系统升级后，原来的cdn链接不可用了
uniapp使用阿里巴巴矢量图
最新发布
06-01
### 在 UniApp 中集成和使用阿里巴巴矢量图库的方法 在 UniApp 中使用阿里巴巴矢量图库可以通过以下方式实现，确保图标在不同平台（H5、小程序、App 等）上都能正常显示。 #### 1. 下载阿里巴巴矢量图标 访问阿里巴巴矢量图标库官网 [https://www.iconfont.cn/](https://www.iconfont.cn/) 并注册账号。选择需要的图标加入购物车后，将其添加至项目中。如果没有现有项目，可以新建一个与当前开发项目名称一致的项目[^2]。完成后下载生成的压缩包并解压，得到以下文件： - `iconfont.css`：样式文件。 - `iconfont.ttf`：字体文件。 - 其他相关文件（如 `demo_index.html` 和 `iconfont.woff` 等）。 将这些文件放入项目的合适目录中，例如 `static/font` 或 `common/icon`[^1]。 #### 2. 修改 `iconfont.css` 文件路径 打开 `iconfont.css` 文件，找到类似以下代码的部分： ```css @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } ``` 将所有字体文件的路径修改为相对于项目根目录的正确路径。例如，如果将文件放在 `static/font` 目录下，则路径应改为 `/static/font/iconfont.ttf` 等[^2]。 #### 3. 引入 `iconfont.css` 在 `App.vue` 的全局样式中引入 `iconfont.css` 文件。确保路径正确无误： ```vue <style> /* 每个页面公共 css */ @import url("/static/font/iconfont.css"); </style> ``` #### 4. 解决移动端不显示问题 由于 UniApp 在处理字体文件时可能会自动将其转换为 Base64 格式，但当 `.ttf` 文件大小超过 40KB 时，可能无法正确转换，导致移动端不显示图标[^3]。此时需要手动将 `.ttf` 文件转换为 Base64 格式。 可以使用在线工具或脚本将 `.ttf` 文件转换为 Base64 字符串，并替换 `iconfont.css` 中的相应部分。例如： ```css @font-face { font-family: 'iconfont'; src: url('data:application/font-ttf;charset=utf-8;base64,AAEAAAA...') format('truetype'); } ``` #### 5. 使用图标 在页面中通过类名使用图标。例如，如果图标对应的类名为 `icon-example`，则可以在模板中这样使用： ```html <view class="iconfont icon-example"></view> ``` ### 注意事项 - 确保 `iconfont.css` 文件中的字体路径与实际存放位置一致[^2]。 - 如果需要支持多端（H5、小程序、App），建议测试每个平台上的显示效果，必要时调整字体文件格式或编码方式。 ```python # 示例代码：检查字体文件路径是否正确 def check_font_path(css_file, font_directory): with open(css_file, 'r', encoding='utf-8') as file: content = file.read() if font_directory not in content: return False return True ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值