一、iconfont-阿里巴巴矢量图标库下载需要的图标

1.将想要的图标添加入库并下载代码

二、下载成功后，将得到一个名为 "download.zip" 的文件，然后解压得到这么一堆文件：

三、转换 ttf 文件为 base64

推荐去 https://transfonter.org 转换

1.配置选项，将配置改为如下红色框所示，并打开 Base64 encode 选项：

2.配置完选项，下一步就可以添加ttf文件开始转换了：

3.选择刚刚从阿里巴巴 http://iconfont.cn 下载后解压出来一堆文件中的 ttf 文件：

4.转换并下载

5.下载成功后，得到一个名为 "transfonter.org" 开头的压缩包，解压后得到三个文件，然后我们打

开 "stylesheet.css" 文件:

三、在小程序中使用
1.新建一个小程序项目，成功后可以自己建一个 resource 文件夹用来放字体图标等资源，并在

resource目录下新建一个 "style.wxss" 的空白文件，这个wxss就是我们的字体图标文件：

2.打开新建的 style.wxss 空白文件，将转换完成后下载下来的三个文件中 "stylesheet.css" 里面的

内容全部复制过来：

3.并将最开始从阿里巴巴下载下来解压后的 "iconfont.css" 打开，把未打叉的部分全部复制到小程

序新建的 "style.wxss" 中：

4.现在我们的 "style.wxss" 长这样：

5.那现在可以直接使用了吗？NO~ ，还需要添加如下一段代码到 style.wxss 中：

[class^="icon-"], [class*=" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family: 'iconfont' !important;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

6.最终 style.wxss 如下（注意两个绿色框中的 font-family 要一致）：

7.全局引入字体图标，打开 "app.wxss" ，引入刚刚创建的 style.wxss，就可以在一级路由页面(也

就是app.json里面pages选项配置的路由页面)使用了 :

原创链接为 ‘微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）_一个好好的程序员的博客-CSDN博客_微信小程序引入字体图标’

微信小程序icon图标引入相关推荐

微信小程序 icon图标 SVG代码转码为Base64编码格式并使用（霸霸看了都说好）
文章目录 SVG 简介什么是SVG SVG有哪些优势 SVG在小程序中的使用获取SVG资源获取对应SVG代码将SVG代码转码为Base64编码格式在具体代码中引用SVG 展示效果 SVG 简 ...
【愚公系列】2022年08月微信小程序-icon图标详解
文章目录前言一.自带图标二.实现图标的五种方案 1.图片 2.精灵图 3.CSS绘图 4.矢量字体 4.1 使用步骤 5.SVG格式前言在小程序中经常会用到各种各样的图标,如果这些图标都使用 ...
微信小程序icon图标自适应大小，最新篇
在page页面使用时: 先在data:创建一个wh: data: {wh: ''}, onLoad: function (options) {var that = thiswx.getSystemIn ...
微信小程序----icon组件
当前效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 效果图原生的icon组件的属性 WXML <view class="icon- ...
微信小程序weui的引入及使用
微信小程序weui的引入及使用一.微信小程序引入WeUI组件库并使用组件 1. 通过useExtendedLib扩展库的方式引入(推荐使用) 2. 通过npm的方式引入(weui-miniprogr ...
微信小程序自定义图标动态显示不同颜色
微信小程序自定义图标动态显示不同颜色该方法不仅仅局限于阿里图标,后台传过来的图标依旧适用,但是后台上传图标的时候需要上传svg格式的图片呢. 主要思路是什么呢:后台上传的svg图片,先使用小程序提供 ...
微信小程序--icon引入外部图标
本博客仅仅只是个意外.大佬请绕道. 第一步:搭建框架首先你得有个微信小程序的开发工具,然后把小白架构搭建好.(不会去看官网). 简单的初步框架搭建完之后目录和界面是这个样子: 如果想加一个底部tab ...
微信小程序：图标的使用（icon）
摘要: 图标主要是用来辅助ui界面的,常用的是√和×,像蓝牙和wifi是否连上的标志,让人直观明了. icon的参数组件icon的参数主要有三个,下图所示: (1)type:icon的类型,官方给出 ...
微信小程序如何正确引入iconfont图标
最近在微信小程序踩坑啦,开始愉快了像web项目一样引入iconfont图标,结果发现: 然后?? 对,这个讨厌的小方块,显示失败啦最好一番百度后,成功解决啦,哈哈哈因为,小程序必须先转为base6 ...
微信小程序map 地图引入配置+腾讯地图地址坐标解析
最终效果一.要实现的功能展示地图. 参考map组件在地图上展示多个店铺. marker标记点用于在地图上显示标记的位置. 点击店铺放大图标,展示选择的店铺信息. 更改选择店铺的标记尺寸大小. 在 ...

微信小程序icon图标引入

一、iconfont-阿里巴巴矢量图标库下载需要的图标

三、转换 ttf 文件为 base64

微信小程序icon图标引入相关推荐

最新文章

热门文章

微信小程序icon图标引入

一、iconfont-阿里巴巴矢量图标库 下载需要的图标

三、转换 ttf 文件为 base64

微信小程序icon图标引入相关推荐

最新文章

热门文章

一、iconfont-阿里巴巴矢量图标库下载需要的图标