小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源

Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法

一、下载图标

首先挑选图标,添加入库

然后添加至项目

然后在“我的项目”中,将资源文件下载到本地

建议设置为 font class

二、在项目中引入资源

在小程序项目中建一个 iconfont.wxss

在下载的资源文件中有一个 iconfont.css,复制文件中所有代码,粘贴到 iconfont.wxss 中

然后在 app.wxss 中引入

/**app.wxss**/
@import 'styles/iconfont.wxss';

这时 font-face 中引入的资源文件还是本地路径

三、将资源路径改为外链

在“我的项目”中,将图标格式设为 Unicode,然后“查看在线链接”

复制生成的代码

粘贴到 iconfont.wxss 中,替换掉原本的 font-face

保存之后即可正常使用

在微信小程序中引入 Iconfont 阿里巴巴图标库的更多相关文章

  1. 微信小程序如何使用iconfont阿里巴巴图标库?

    步骤: 1.如图先下载:  2.找到iconfont.css改为iconfont.css 3.修改iconfont.wxss文件的内容,如图复制内容至其文件 4.替换到文件页面当中 5.去页面中引入i ...

  2. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  3. 如何在微信小程序中使用iconfont

    开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...

  4. 如何在微信小程序中使用阿里字体图标

    第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  ...

  5. 微信小程序中使用阿里ICON图标

    由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过 https://transfonte ...

  6. 微信小程序中使用iconfont/font-awesome等自定义字体图标

    小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...

  7. 小程序中引入iconfont

    注释:本人喜欢 font class,  你们可以依葫芦画瓢unicode和 symbol,,下面是 font class   演示: 1.选择好图标,然后: font class 2.步骤二: 复制 ...

  8. 如何在微信小程序中国引入fontawesome字体图标

    fontawesome官网地址:http://fontawesome.dashgame.com/ 一. 二. 下载之后的字体图标 找到 文件中的如下图.ttf文件 三. 在https://transf ...

  9. 在微信小程序中使用redux

    本文主要讲述,在微信小程序中如何使用redux DEMO 需要解决的问题 如何在小程序中引入redux状态管理库,及它相关的插件? 微信小程序没有清晰的异步api,便于thunkMiddleware处 ...

随机推荐

  1. 微信小程序之模版的使用(template)

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 分为两部分,定义模板和使用模板 (1).定义模板:使用 name 属性,作为模板的名字.然后在<templ ...

  2. Java入门开发POI读取导入Excel文件

    Apache POI是Apache开发的开源的跨平台的 Java API,提供API给Java程序对Microsoft Office格式档案进行各种操作. POI中Excel操作很简单,主要类有 HS ...

  3. centos 安装nginx笔记

    添加nginx 存储库 yum install epel-release 安装 yum install nginx 启动 systemctl start nginx

  4. 从官网下载指定版本的JDK

    从官网下载指定版本的JDK 一.百度搜索jdk,进入最新版Downloads界面 百度搜索jdk,或者jdk下载,点击进入jdk官网最新版本下载界面,可以看到当前最新版本为jdk12 二.找到JDK历 ...

  5. [0day]微软XP系统右键菜单任意DLL却持

    作者:K8哥哥只要在DLL上右键就被却持 任意DLL名称 任意位置 (其实是EXPLOR) 这个漏洞早已存在,08年的时候就发现了(当时编译某个DLL源码) 在DLL上右键看属性的时候崩溃了,当时就想 ...

  6. Math.log()对数的妙用

    ###对数log 的妙用... formatBytes(bytes) { if (bytes === '0' || isNaN(bytes)) return ''; var s = ['Bytes', ...

  7. JVM中强引用,弱引用,软引用和幽灵引用的代码

    上代码: public class ReferenceTest { public static void main(String[] args) { //test1();//软引用 //test2() ...

  8. c++中文件读取

    对于C++编译运行文件,我使用过两个编译器,一个是visual studio 2013,另外一个是devcpp,推荐使用devcpp. vs的特点是界面整洁清晰,但是需要收费,这是微软的,并且在电脑上 ...

  9. Chrome 的 Material Design Refresh UI初探

    今天Chrome自动升级到69.0.3497.92, 发现UI已经变成了"Material Design Refresh". Chrome 浏览器的页面标签已经不再像以往那样倾斜和 ...

  10. vue代码上传服务器后背景图片404解决方法

    问题:代码上传服务器后,图片404,使用的font-awesome图标也是404 解决办法: 如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin ...