微信小程序使用字体图标库

在微信小程序项目中需要用到字体图标，所以记录一下解决过程。因为比较喜欢使用阿里巴巴矢量图标库，就以此为例来说。

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

进入https://www.iconfont.cn/，在我的项目中添加自己需要的图标，具体如下

搜索图标后，添加至项目

将项目下载至本地并解压

二、转换ttf文件

将解压后得到的ttf文件拿到https://transfonter.org/进行转换，转换步骤如下图片所示

下载转换后的文件

三、在微信小程序中使用

解压下载后的文件，在编辑器中打开

将其中的内容复制到微信小程序的wxss文件中

再打开之前在阿里巴巴矢量图标库中下载的文件

打开上图css文件，将下图框中的代码复制到微信小程序wxss文件中

最后在微信小程序wxml中的class中引用即可，如图，代码如下

<view class="hot-like"><text class="iconfont iconbuoumaotubiao44 hot-collection"></text><text class="iconfont iconpinglun hot-comments"></text>
</view>

微信小程序使用字体图标库相关推荐

微信小程序使用font-awesome图标库
微信小程序使用font-awesome图标库网上看到的方法,亲测成功:参考方法下载font-awesome字体包打开Transfonter网站,上传字体fontawesome-webfont.t ...
微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
微信小程序iconfont字体图标文件无法上传问题
最近在写毕业设计的时候,因为微信小程序本身的字体图标无法满足我的开发需求,但是在引入之后发现开发工具预览没问题但是真机调试就出现了问题, 在查阅资料后找到了解决的办法.我将原本放在static下的字体 ...
微信小程序之阿里图标库icon的symbol使用方式
近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理. 但是压缩处理之后效果也没有很显著,而且再次进行压缩还需要收费. 最近研究了阿里巴巴矢量图标 ...
微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
微信小程序使用字体图标的方法iconfont
一. 先到阿里巴巴矢量图标库,搜索你想要的图标,然后添加入库. 将使用到的图标加入购物车点击购物车下载代码获取字体库文件二. 到这个平台 https://transfonter.org,把刚才 ...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
uni-app小程序阿里巴巴字体图标兼容ios
问题描述提示:uni-app 小程序阿里巴巴字体图标库不兼容 <icon class="iconfont icon-xuanze"></icon> 解决 ...
微信小程序设置字体无效_微信小程序自定义字体及自定义图标问题说明
自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关讨论: Q:小程序开发时能否使用我们自定义 ...

微信小程序使用字体图标库

微信小程序使用字体图标库相关推荐

最新文章

热门文章