微信小程序中引入iconfont阿里矢量图库

阿里巴巴图标iconfont网址

iconfont网址 :https://www.iconfont.cn/

登录网站
搜索相应图标

将想要的图标添加到 购物车车里；
添加图标到项目

新建项目完成后，自动跳转，之后选择下载至本地；
4. 图标下载
5. 下载后解压，会发现有个iconfont.css文件，打开编辑并复制其中的内容。


```css
@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1614737718590'); /* IE9 */src: url('iconfont.eot?t=1614737718590#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),url('iconfont.woff?t=1614737718590') format('woff'),url('iconfont.ttf?t=1614737718590') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1614737718590#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-airudiantubiaohuizhi-zhuanqu_helihuajianyi:before {content: "\e696";
}.icon-Oilbarrel:before {content: "\e8af";
}.icon-jianyifankui-:before {content: "\e61b";
}.icon-zuixing-64:before {content: "\e63d";
}

打开微信开发者工具，找打app.wxss，将刚才复制的内容粘贴至下面；
在wxml中引用icon图标，例如引用icon-Oilbarrel图标
若图标引用名称、大小及颜色可以自己改变

ps：注意，我为了方便，所以直接写在了app.wxss中，当然你可以自己新建一个wxss文件，然后使用@import方式引入这个wxss样式。

微信小程序中引入iconfont阿里矢量图库相关推荐

微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法一.下载图标首 ...
微信小程序中引入ttf字体
微信小程序中引入ttf字体解决常规引入ttf不生效问题第一步:将ttf字体转为base64(转码网址:https://transfonter.org) 第二步:在static文件夹下新增font文 ...
在微信小程序中使用iconfont
微信小程序上使用iconfont的方法一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 ...
微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份进行了网站维护,维护之后,不能"生成在 ...
微信小程序中怎么使用阿里图标库中的图标
我们知道,微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的,所以,以前我们可能会在css中使用阿里图标库,但是在微信小程序中使用阿里图标库,要做一些处理阿里图标库(不会使用的底下留言 ...
如何在微信小程序中使用iconfont
开篇废话开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
微信小程序中使用iconfont图标
方案一: 利用小程序中不支持 ttf 字体,却支持 base64 的特点,我们可以通过将 ttf 字体转码成 base64 ,再通过 iconfont 的特点,通过设置字体大小和颜色来达到目的. 具体 ...
微信小程序中引入VR全景图
选择一款合适的vr制作工具 (krpano付费)(pannellum免费) 1.拿到做好的vr图片导入到HTML中(本案例用的pannellum) https://pannellum.org/ 然后让 ...
【uniapp-微信小程序】如何在微信小程序中使用iconfont字体包
在这里介绍一种使用ttf转Base64的方法在项目中引入iconfont字体包的过程 1. 获取字体包在阿里巴巴矢量图标库中,寻找合适的图标,然后将其添加至库中: 添加完想要的图标后,点击右上角的购 ...

微信小程序中引入iconfont阿里矢量图库

阿里巴巴图标iconfont网址

微信小程序中引入iconfont阿里矢量图库相关推荐

最新文章

热门文章