小程序的代码包不能超过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. Git-根据tag创建分支

    有时候需要根据tag创建分支. 现在主分支上有一个tag为vtest.1.0.FINAL,主分支的名字为master. 1.执行:git origin fetch 获得最新. 2.通过:git bra ...

  2. Eclipse 导入本地 Git 项目

    File -->  Open Projects From File System 选择项目路径 Finish

  3. ORA-01113 & ORA-01110同时出现

    \NOARCHIVED LOG , 没备份 , Redo Log 被覆盖 , 某个datafile不能online 设计知识点:BBED> set block 1BBED> p kcvfh ...

  4. Java操作word文档使用JACOB和POI操作word,Excel,PPT需要的jar包

    可参考文档: http://wibiline.iteye.com/blog/1725492 下载jar包 http://download.csdn.net/download/javashixiaofe ...

  5. android初探

    随着nodejs的不断发展,前端的范围越来越大,所以,适当的了解移动端是非常有必要的,比如使用RN开发app,前端必须要和安卓工程师沟通共同开发,那么学习android的基本知识就很重要了,因为目前安 ...

  6. webgl介绍

    一.webgl与three.js 我们知道canvas.svg等是2D绘图的,那么如果想要使用js进行3D绘图,可以吗? 答案是肯定的!实际上主流的3D开发使用的是c++,但是随着技术的发展,Java ...

  7. tensorflow进阶篇-5(反向传播1)

    这里将讲解tensorflow是如何通过计算图来更新变量和最小化损失函数来反向传播误差的:这步将通过声明优化函数来实现.一旦声明好优化函数,tensorflow将通过它在所有的计算图中解决反向传播的项 ...

  8. spring cloud(服务消费者(利用ribbon实现服务消费及负载均衡)——初学二)

    Ribbon是一个基于HTTP和TCP客户端的负载均衡器,利用ribbon实现服务消费,并实现客户端的负载均衡. 一.准备工作(利用上一节的内容) 启动服务注册中心 启动computer-servic ...

  9. ASP.NET状态管理的总结

    阅读目录 开始 hidden-input QueryString Cookie ApplicationState ViewState,ControlState Session Profile 各种状态 ...

  10. asp.net core web 添加角色管理

    新建asp.net core web应用 添加RolesAdminController [Authorize(Roles = "Admin")] public class Role ...