微信小程序引用阿里巴巴矢量图标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(){ / ...
随机推荐
- Redis入门笔记-redis内部数据结构(01)
redis是一个轻量级的Nodsql数据库,使用kev-value的形式存储数据,在redis的世界里,没有整数.浮点数等概念,大多数情况下数据以字符串形式展现,偶尔会出现Long类型数据的场景. 一 ...
- 可以忽略的:BASH:/:这是一个目录
linux Ubuntu 14.04 在使用VIM编辑 /etc/profile 保存之后,出现了这个问题 其实,这个是可以忽略不计的问题,字符编码问题
- 应运而生! 双11当天处理数据5PB—HiStore助力打造全球最大列存储数据库
阿里巴巴电商业务中历史数据存储与查询相关业务, 大量采用基于列存储技术的HiStore数据库,双11当天HiStore引擎处理数据记录超过6万亿条.原始存储数据量超过5PB.从单日数据处理量上看,该系 ...
- SpringMVC(二)@RequestMapping
学习@RequestMapping注解,参考Spring API 1.@RequestMapping可以修饰在类类型和方法上 ①.修饰在类定义上: 提供初步的URL映射,相对于web应用 ...
- Zabbix4.0 Web管理界面中文乱码解决方法(转)
Zabbix安装好之后,监控图形页面出现字符集乱码 解决方法:1.复制本地电脑C:\Windows\Fonts\simkai.ttf(楷体)上传到zabbix服务器网站目录的fonts目录下 2.za ...
- 取得Linux系统的各种统计信息
本文基于Linux 2.6.x内核 一.取得CPU信息(相关文件/proc/stat) 在一个系统中的/proct/stat文件内容如下 $ cat /proc/stat cpu 1039426 17 ...
- 两个sed小技巧:sed "/变量/变量/"
两个sed小技巧 在写shell时使用sed处理一些输出,遇到两个问题,在网上找到了相应的解决办法,在此处备份一下. [ sed处理空字符 ] 空字符,它的ASCII码值为0.在sed中如何标识空字符 ...
- Codevs 1077 多源最短路( Floyd水 )
链接:传送门 思路:裸 Floyd /************************************************************************* > Fi ...
- mysql 每个月创建新表
1.CREATE DEFINER=`root`@`%` PROCEDURE `aa`()BEGIN SET @sqlstr = CONCAT('create table cdrpbx10_',DATE ...
- 《代码敲不队》第八次团队作业:Alpha冲刺 第二天
项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 掌握软件编码实现的工程要求. 团队项目github仓库地址链接 GitH ...