在微信小程序中如何引入iconfont

在微信小程序如何引用iconfont？

1.首先进入iconfont 选择自己喜欢的图标

iconfont-阿里巴巴矢量图标库

2.选择自己喜欢的图标加入购物车

3.将图标添加至项目（如果没有项目就随便新建一个项目）

4.打开个人主页

找到自己的项目，点击 Font class

5.复制链接

跳转到代码页面，由于我们的图标是在所以我们要将链接的后缀.css改成.wxss。复制全部代码

在微信小程序文件夹中，有一个style文件夹，新建一个文件iconfont.wxss然后将代码粘贴在此

因为要用这个图标文件所以在app.wxss文件中写下

@import "./styles/iconfont.wxss”

例子：

假设我们要在index页面引用一个图标，所以在index.wxml中写下

<view>首页
<text class="iconfont icon-shoucang"></text>
</view>

则页面显示效果为

在微信小程序中如何引入iconfont相关推荐

微信小程序中使用阿里iconfont
1.从阿里iconfont中下载自己的iconfont项目 2.下载成功之后解压至项目文件夹下我们需要用到的文件只有以上箭头的四个 3.如果我们直接使用.ttf .woff .woff2文件,在进行 ...
微信小程序如何正确引入iconfont图标
最近在微信小程序踩坑啦,开始愉快了像web项目一样引入iconfont图标,结果发现: 然后?? 对,这个讨厌的小方块,显示失败啦最好一番百度后,成功解决啦,哈哈哈因为,小程序必须先转为base6 ...
把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标
前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? 将图标加入购物车搜索关键词可以是中文也可 ...
微信小程序中页面引入js文件
一.引入util中的util.js文件: utils.js可以存储全局的方法(function).变量(const url)等,类似于可以实现公共存储. 首先,来看utils.js中: const f ...
在Vue项目和微信小程序中使用阿里图标
文章目录在vue项目中正确使用iconfont的方法 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至我的项目 3.点击font-class.下载至本地,一 ...
微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
微信小程序中引入ttf字体
微信小程序中引入ttf字体解决常规引入ttf不生效问题第一步:将ttf字体转为base64(转码网址:https://transfonter.org) 第二步:在static文件夹下新增font文 ...
在微信小程序中使用iconfont
微信小程序上使用iconfont的方法一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 ...
微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...