微信小程序使用阿里巴巴iconfont字体图标

打开阿里巴巴iconfont官网(http://www.iconfont.cn/);
把用到的字体图标加到项目里面;
进入到项目里面，选择font class方式来使用，如果没有生成过代码的同学点生成，已经有代码的直接复制代码;

iconfont.png

iconfont.png

4.浏览器新建页面，把复制的代码粘贴到地址栏，回车。然后全选页面的内容，复制;

image.png

5.把复制的页面内容粘贴到项目的app.wxss文件(粘贴到app.wxss，项目里的每个页面都能使用，如果只是某一个页面用到的话，也可以粘贴到对应页面的wxss文件);

image.png

6.使用某个字体图标。把鼠标悬浮到要使用的字体图标上面，然后点复制代码，或者直接复制字体图标的类名(没留意过叫什么，应该是叫类名吧)。然后到项目要使用字体图标页面的wxml，用个微信小程序支持的行内标签(我用的是<i>)，把类名粘贴上去就OK啦！

<view><i class="iconfont icon-feiji2" style="font-size: 100px; color: red;" /><text>我是字体图标，飞机</text>
</view>

image.png

iconfont

效果图

image.png

好啦，本宝宝要去撸代码去啦！！！

微信小程序使用阿里巴巴iconfont字体图标相关推荐

微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份进行了网站维护,维护之后,不能"生成在 ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
微信小程序如何使用阿里字体图标（用法非常简单适用web）
生成iconfont(地址) 把你想要的图标添加到购物车. 创建当前项目名称, 将购物车的图标加入项目这样生成项目图标素材下载到本地, 需要用到 :1. iconfont.css 是图标样式定义:2 ...
微信小程序开发：使用字体图标的方法
在微信小程序开发过程中,图标的使用是很常见很普遍的.一般情况下,在微信小程序项目的文件目录里面images里面,可以直接引用本地的图标文件,但是通过使用字体图标或者background设置背景图的时候 ...
【uniapp-微信小程序】如何在微信小程序中使用iconfont字体包
在这里介绍一种使用ttf转Base64的方法在项目中引入iconfont字体包的过程 1. 获取字体包在阿里巴巴矢量图标库中,寻找合适的图标,然后将其添加至库中: 添加完想要的图标后,点击右上角的购 ...
微信小程序引入外部iconfont 字体不显示原因分析
模拟器上正常真机不显示原因安卓手机不显示,显示为一个框中的X @font-face {font-family: "iconfont";src: url('https://x ...
微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...

微信小程序使用阿里巴巴iconfont字体图标

好啦，本宝宝要去撸代码去啦！！！

微信小程序使用阿里巴巴iconfont字体图标相关推荐

最新文章

热门文章