微信小程序引入下载至本地的iconfont图标

在写小程序项目中遇到icon图标引入不起作用，原因是因为小程序必须先转为base64引入！

第一步

选好自己要用的icon图标并下载至本地

下载后得到这样目录的文件

第二步转换成base64
网址：https://transfonter.org/

选择后缀为.ttf的文件

第三步：下载成功后，得到一个名为 “transfonter.org” 开头的压缩包，解压后得到三个文件，打开其中 “stylesheet.css” 文件

第四步：在小程序目录新建放置图标资源的文件

这是我自己的一个目录，可以看到在iconfont.wxss中，如果是直接复制文件的话，记得把后缀css改成wxss

把@font-face中的内容换成stylesheet.css的内容

还需要在wxss中添加这段代码：

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

之后找到下载的本地icon图标文件夹里的iconfont.css文件，将里边的图标代码复制到wxss中，添加完之后整体代码如下：

第五步在app.wxss中引入，就可以全局使用了。

最后测试显示效果：

微信小程序引入下载至本地的iconfont图标相关推荐

微信小程序引入外部的CSS或iconfont
使用外部样式的方法是: @import '相对路径下的外部样式文件.wxss'; iconfont作为一种特殊的CSS也逃不开这个命运,小程序的wxss文件font-face中的url不接受HTTP地 ...
微信小程序引入外部icon（阿里巴巴矢量图标）
1.实现效果 2.实现步骤阿里巴巴矢量图标库搜索想要的图标,添加购物车. 添加进自己的项目中获取代码(注意:当项目更新之后,该代码也需更新) 3.实现代码新建一个iconFont.wxss,复 ...
微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序引入外部字体
微信小程序引入外部字体前言 wx.loadFontFace Base64 尾巴前言微信小程序由于打包体积限制,不支持直接引入字体文件.但是如果我们想引入自定义的字体该怎么操作了?接下来我们介绍两 ...
微信小程序引入高德地图Demo 快速上手
文章目录前言一.获取高德key 二.引入官方实例总结前言本文参照官方文档进行编写最后引入官方实例最终效果 ` 一.获取高德key 注册账号 https://lbs.amap.com/?r ...
微信小程序引入iview weapp
微信小程序引入iview weapp 1. 下载iview 方式1:前往github下载 iview下载地址方式2:在项目中通过npm引入 2. 引入下载好的文件解压文件,目录如下将其中的dis ...
微信小程序引入ECharts，并自定义动态修改表内参数配置
ECharts官方并没有给出小程序的相关参考,但是有大神做出了ECharts-小程序版,可以直接引用. 效果图引用步骤 1.下载文件 GitHub - ecomfe/echarts-for-weix ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d
一.微信小程序引入echarts过大最佳解决方案微信上传时代码包大小限制为2MB,但是当我们引入echarts以后,单echarts代码包已经973KB,因此再结合额外的业务代码以及其他资源很有可能 ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...

微信小程序引入下载至本地的iconfont图标

在写小程序项目中遇到icon图标引入不起作用，原因是因为小程序必须先转为base64引入！

微信小程序引入下载至本地的iconfont图标相关推荐

最新文章

热门文章