阿里图标官网：http://www.iconfont.cn

使用阿里云图标大致的方法就是：选中你的图标——保存至你的项目——下载你的图标项目——在项目中引用字体文件。

具体方法可以参考：引用阿里云矢量图标库。

我们今天重点是讲如何在微信小程序中引用阿里云图标库。

我们就从你已经下载好了图标库说起了。

1.把该字体文件及css文件放入到小程序项目中，文件目录如下图：

2.在app.wxss里面引入iconfont.wxss

3.通过icon引用

具体代码如下：

<icon class="tabbar-icon shishuofont icon-audio-linear"></icon>

tabbar-icon:我自己定义的class

 
shishuofont:阿里云创建项目时定义的

icon-audio-linear：对应的图标名字

最后效果如下图：

是不是 so easy?!

 

微信小程序——引用阿里云字体的更多相关文章

  1. 微信小程序引用iconfont图标字体解决方案；

    1)首先,登录阿里巴巴iconfont.cn 2)新建项目 3)点击icon收藏 4)加入到test项目中   5)下载到本地解压   6)生成代码   7)复制iconfont.css到xxx.wx ...

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

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...

  3. 微信小程序+腾讯云直播的实时音视频实战笔记

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  4. 微信小程序腾讯云php后台解决方案

    微信小程序腾讯云php后台解决方案 微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)conf ...

  5. 微信小程序开发 -- 通过云函数下载任意文件

    微信小程序开发 -- 通过云函数下载任意文件 1.云开发介绍 ​ 微信小程序开发者众所周知,小程序开发拥有许多限制,当我还是一个菜鸟入门的时候,第一关就卡在了没有备案域名的HTTP请求上面,那时候云开 ...

  6. 微信小程序如何引入外部字体库iconfont的图标

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...

  7. 微信小程序腾讯云配置Tomcat https端口

    在个人开发微信小程序时,发布之前要配置微信小程序的域名https及域名的SSL证书的申请及安装 我用的是腾讯云,SSL证书申请好之后,点击下载,解压文件夹,会有如图,根据你要配置的服务器是哪种,我是t ...

  8. 微信小程序引用阿里巴巴矢量图标iconfont

    最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ...

  9. 微信小程序中使用云开发获取openid

    微信小程序获取openid 新建一个微信小程序项目 注意要注册一个自己的小程序账号,并有属于自己的appid 点击云开发按钮,自行填入开发环境名称 打开app.js,找到依赖环境 修改为刚才设置的环境 ...

随机推荐

  1. 全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）

    前言 大学的学习时光临近尾声,感叹时光匆匆,三年一晃而过.同学们都忙着找工作,我也在这里抛一份简历吧,欢迎各位老板和猎手诚邀.我们进入正题.直播行业是当前火热的行业,谁都想从中分得一杯羹,直播养活了一 ...

  2. 三星 S4 手机误删除相片（相册）后的恢复问题，仅记录处理过程，其它Android手机同样适用

    无意中删除了三星S4手机中相机的相册.过程是这样的,用手机拍了几张照片,觉得最后那张拍得不好,想删除,于是进入相册,看到有那张照片的图标,选择,删除,悲剧发生了! 这里得说三星的不好:在相册中,相册文 ...

  3. Eclipse_Configure

    原文链接:http://android.eoe.cn/topic/android_sdk 1. 下载Eclipse 在前面我们配置好了JDK环境后,就可以开始配置Android的集成开发环境了,官方G ...

  4. 【Android API】Android 4.1 API官方文档详解

    原文:http://android.eoe.cn/topic/summary 翻译:[eoeAndroid原创团队]kris.流风而逝.贼寇在何方.snowxwyo.lsy4833406 更新日期:2 ...

  5. 注册vue组件的几种方式

    1,全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2,局部注册 var Child = { template: '<div&g ...

  6. Java 的 I/O 类库的基本架构

    Java 的 I/O 类库的基本架构 I/O 问题是任何编程语言都无法回避的问题,可以说 I/O 问题是整个人机交互的核心问题,因为 I/O 是机器获取和交换信息的主要渠道.在当今这个数据大爆炸时代, ...

  7. NGUI的UISprite动态染色的一种方法

    本文主要参考iwinterice 的 NGUI的UISprite动态染色的一种解决方案 文章. 参考参考,就是既参详又拷贝,-,-||| 相关理论依据,还请去移步 NGUI的UISprite动态染色的 ...

  8. s3c2440——swi异常

    系统复位的时候,从0地址开始执行,这个时候系统处于svc管理模式. 一般而言,我们的app应用程序是处于用户模式的,但是用户模式不能访问硬件,必须处于特权模式才可以.所以这里我们用swi软中断方式来实 ...

  9. CentOS7下查询硬件信息

    原文:https://blog.csdn.net/pwb1994001/article/details/80896267 因为个人需要,整理的 参考:https://blog.csdn.net/dre ...

  10. 真机调试报错error ==Error Domain=NSURLErrorDomain Code=-1009 "似乎已断开与互联网的连接。"

    真机调试报错error ==Error Domain=NSURLErrorDomain Code=-1009 "似乎已断开与互联网的连接." 请注意,错误代码是-1009,网上关于 ...