小程序的代码包不能超过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. 【ElasticSearch】:elasticsearch.yml配置

    ElasticSearch5的elasticsearch.yml配置 注意 elasticsearch.yml中的配置,冒号和后面配置值之间有空格 cluster.name: my-applicati ...

  2. centos 安装nginx笔记

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

  3. [Leetcode]120.三角形路径最小和

    ---恢复内容开始--- 题目的链接 简单的动态规划题,使用了二维dp数组就能很好的表示. 由于有边界的问题,所以这个dp数组为 dp[n+1][n+1]. dp[i][j]意思是终点为(i-1,j- ...

  4. 【sping揭秘】11、Java 平台上的AOP实现机制

    动态代理 Jdk1.3只有引入的动态代理机制,可以再运行期间,为相应的接口(必须得有接口)动态生成对应的代理对象 基于以上问题,我们可以将横切关注点逻辑封装到动态代理的invocationhandle ...

  5. [Umbraco] document type里的父节点与子节点的设置

    虽然我们不能像做数据库设计那样建立主外键关系.但我们建立xml里父子关系,父子关系其实是指是否允许在一个页面(如频道,分类,栏目等)下创建子页面,这就相当于建立站点的树状结构,对于筛选数据会有很大的作 ...

  6. odoo开发笔记 -- 前端开发相关

    https://www.cnblogs.com/lyzg/p/5634565.html http://dmyz.org/archives/598 https://www.jianshu.com/p/6 ...

  7. PHP使用APC获取上传文件进度

    今天发现使用PHP的APC也能获取上传文件的进度.这篇文章就说下如何做. 安装APC 首先安装APC的方法和其他PHP模块的方法没什么两样,网上能找出好多 phpinfo可以看到APC的默认配置有: ...

  8. RabbitMQ AMQP (高级消息队列协议)

    目录 RabbitMQ AMQP (高级消息队列协议) Message Queue 简介 概念 基本组成 场景及作用 AMQP简介 模型架构 基础组件 AMQP-RabbitMQ 简介 模型 特性 参 ...

  9. Dubbo--002--例子程序

    虽然项目中用到了dubbo,还是想自己玩玩写个demo.百度一搜,关于dubbo的helloworld基本都是在windows上做的.现在在Linux上玩一下. 环境准备: jdk版本:1.7 服务器 ...

  10. JavaScript与CSS相对路径引用的差异

    转自:http://blog.csdn.net/luohuidong01/article/details/74938652 JS跟CSS相对路径引用的差异在于他们的参考点不一样,下面举个例子说明一下. ...