相信有这个需求的都在其他项目中用过阿里图标，所以这里就跳过怎么去找阿里图标。

1、

找好了图标之后，直接下载到本地

2、

点击查看在线连接

复制代码

3、

将刚才下载好的字体图标项目解压，找到 iconfont.css ，打开，然后上一步复制的代码覆盖下图红线部分

4、

将修改后的 iconfont.css 全部内容复制到 wxss 中，然后在 wxml 中使用该图标类名即可

<text class='iconfont icon-shoucang1' style='font-size:36px; padding:0 40rpx;'></text>
<text class='iconfont icon-tubiao212' style='font-size:36px; padding:0 40rpx;'></text>

效果

小程序中使用阿里字体图标相关推荐

微信小程序如何使用阿里字体图标（用法非常简单适用web）
生成iconfont(地址) 把你想要的图标添加到购物车. 创建当前项目名称, 将购物车的图标加入项目这样生成项目图标素材下载到本地, 需要用到 :1. iconfont.css 是图标样式定义:2 ...
微信小程序中使用阿里巴巴字体图标
第一步:先收藏自己需要的图标到自己的项目中第二步:点击项目设置,并勾选base64位第三步:设置完成并保存后,下载至本地 ,并且将 iconfont.css 文件内的所有内容复制到小程序的wxss ...
微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份进行了网站维护,维护之后,不能"生成在 ...
在小程序中使用阿里巴巴矢量图标库
在百度小程序或者其他小程序中使用阿里巴巴矢量图标库是为了提高小程序渲染加载,因为小程序文档内都不建议把所有的图片和图标文件放在小程序端,在小程序中使用阿里巴巴矢量图标库的字体图标,首先要在这个网站挑选 ...
原生小程序之引入 icon字体图标
目录原生小程序之引入 icon字体图标字体图标的配置原生小程序之引入 icon字体图标 icon官网 01:挑选对应的字体图标 02:添加入项目 ( 需要自己创建一个项目 ) 03:点击下 ...
微信小程序中引入ttf字体
微信小程序中引入ttf字体解决常规引入ttf不生效问题第一步:将ttf字体转为base64(转码网址:https://transfonter.org) 第二步:在static文件夹下新增font文 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
微信小程序中使用阿里iconfont
1.从阿里iconfont中下载自己的iconfont项目 2.下载成功之后解压至项目文件夹下我们需要用到的文件只有以上箭头的四个 3.如果我们直接使用.ttf .woff .woff2文件,在进行 ...
在Vue项目和微信小程序中使用阿里图标
文章目录在vue项目中正确使用iconfont的方法 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至我的项目 3.点击font-class.下载至本地,一 ...

小程序中使用阿里字体图标

1、

2、

3、

4、

小程序中使用阿里字体图标相关推荐

最新文章

热门文章