微信小程序引用阿里巴巴矢量图标iconfont
最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法
第一步:下载阿里巴巴矢量图代码;
第二步:将下载下来的文件中iconfont.ttf转换即可。转换地址:https://transfonter.org/
转换之后会生成三个文件:
第三步:将stylesheet.css中的全部代码(@font-face)以及之前下载iconfont文件中除了@font-face 以外的代码全部复制到小程序项目中新建的.wxss文件中;
第四步:在所需要的.wxss文件中通过@import ‘路径’的方式将第三步新建的wxss文件引入;
第五步:在页面中使用,通过添加iconfont类和所需的类名即可在页面上显示。
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .icon-sousuo:before { content: "\e613"; }
<text class='iconfont icon-sousuo'></text>
微信小程序引用阿里巴巴矢量图标iconfont的更多相关文章
- 如何在微信小程序中使用字体图标
微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...
- 微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标——保存至你的项目——下载你的图标项目——在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...
- 微信小程序 引用其他js里的方法
微信小程序中,在微信官方开发文档我们可以知道 小程序的目录结构 . 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件 ...
- 微信小程序引用外部js,引用外部样式,引用公共页面模板
https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js============= ...
- 在微信小程序中使用阿里图标库Iconfont
首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入i ...
- 微信小程序 - tabbar动态更换图标以及文字
大家不喜欢小程序的tabbar原因之一就是它太死板,tabbar一旦在app.json定义以后文字不能改,图标不能改! 我要自制tabbar!!! 其实在微信更新完1.9.0基础调试以后就推出了更新方 ...
- 微信小程序引用iconfont图标字体解决方案;
1)首先,登录阿里巴巴iconfont.cn 2)新建项目 3)点击icon收藏 4)加入到test项目中 5)下载到本地解压 6)生成代码 7)复制iconfont.css到xxx.wx ...
- 微信小程序如何导入字体图标
前提:我们已经拥有了从阿里图标库下载下来的一系列的字体图标文件1:找个其中的ttf格式的文件,然后打开https://transfonter.org/网站2:点击Add fonts按钮,加载ttf格式 ...
- 微信小程序引用外部js
1.先建立一个common.js, 写我们的外部js 比如: common.js function getTime(){ //下面写我们的代码 .... } function getCity(){ / ...
随机推荐
- CDR快速制作苹果手机照片小图标
本篇教程用CorelDRAW快速制作苹果手机照片小图标,在实现的过程中主要使用了旋转复制的方法,加之一些常用工具的用法处理,最后加上透明效果下的合并模式就好了,现在跟小编一起来看看详细的操作吧! 1. ...
- MySQL_pymysql模块
安装:pip install pymysql 基本操作 import pymysql conn=pymysql.connect(host=',database='lary',charset='utf8 ...
- MySQL_视图/触发器/事务/存储过程/函数
视图.触发器.事务.存储过程.函数 视图 视图是一个虚拟表(非真实存在),其本质是根据SQL语句获取动态的数据集,并为其命名,用户使用时只需使用名称即可获取结果集,可以将该结果集当作表来使用 #创建视 ...
- java 1.8 内存告警问题
Java HotSpot(TM) 64-Bit Server VM warning: ignoring option PermSize=512m; support was removed in 8.0 ...
- javase 继承练习
package xuexi; 父级 public class Fu { int num=0; public void eat() { System.out.println("父亲在吃饭&qu ...
- Spring Boot 项目学习 (二) MySql + MyBatis 注解 + 分页控件 配置
0 引言 本文主要在Spring Boot 基础项目的基础上,添加 Mysql .MyBatis(注解方式)与 分页控件 的配置,用于协助完成数据库操作. 1 创建数据表 这个过程就暂时省略了. 2 ...
- 网络教程(13) 深入TCP协议
应用层向TCP层发送用于网间传输的.用8位字节表示的数据流,然后TCP把数据流分割成适当长度的报文段(通常受该计算机连接的网络的数据链路层的最大传输单元(MTU)的限制).之后TCP把结果包传给IP层 ...
- Java IO 流总结
Java流操作有关的类或接口: Java流类图结构: 流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...
- MYSQL: sql中某一个字段内容为用逗号分割的字符串转换成多条数据
场景: 表名:testsuer id name 1 小红,小李,李红,小法 要结果值为: 1 小红 1 小李 1 李红 1 小法 MYSQL函数解释 ...
- 2019-03-25 SQL SET ANSI_NULLS /SET QUOTED_IDENTIFIER /SET NOCOUNT ON
use database go /**当 SET ANSI_NULLS 为 ON 时,即使 column_name 中包含空值,使用 WHERE column_name = NULL 的 SELECT ...