微信小程序引用阿里巴巴矢量图标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(){ / ...
随机推荐
- Caffe+UbuntuKylin14.04_X64+CUDA 6.5配置
在编译Caffe的漫长过程中,经过了一个又一个坑,掉进去再爬出来,挺有趣的.对比原文有修改! LInux下配置安装:(本文档使用同一块NVIDIA显卡进行显示与计算, 如分别使用不同的显卡进行显示和计 ...
- spring boot的项目结构问题
问题:spring boot项目能够正常启动,但是在浏览器访问的时候会遇到404的错误,Whitelable Error Page 404 分析及解决方案:首先Application文件要放在项目的外 ...
- ZBrush的双十一来了,然鹅...
不管是“光棍节”还是“剁手节” 似乎和我都没有什么关系 事实证明,我错了 今早竟然有不识趣的人发红包祝我单身快乐 纳尼,这是唱的哪一出? 我能直接怼回去,说不领么? 但好像又不是我的风格 哎,一个红包 ...
- 记一次IOS对 JS的支持问题
最终在这位博主那块找到问题https://blog.csdn.net/github_36487770/article/details/82465741 在利用Vue开发一个功能时遇到时间拼接格式化问题 ...
- MySQL_pymysql模块
安装:pip install pymysql 基本操作 import pymysql conn=pymysql.connect(host=',database='lary',charset='utf8 ...
- Redis详解入门篇(转载)
Redis详解入门篇(转载) [本教程目录] 1.redis是什么2.redis的作者3.谁在使用redis4.学会安装redis5.学会启动redis6.使用redis客户端7.redis数据结构 ...
- 洛谷P3960 列队 Splay
其实思路并不算太难,就是代码量相对较大. 我们将一次离队转换为一次删除和两次加入,这样就可以保证空间是动态分配的,最大也不会暴空间. 说实话写之前感觉会很恶心,但是代码量就还好吧,有些细节需要特殊注意 ...
- 可横向滑动的vue tab组件
示例 前端使用技术:框架->vue 组件>ly-tab一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件 ly-tab 介绍地址 ly-tab npm地址 使用步骤 1,引入包,定义 ...
- 动态规划——独立任务最优调度(Independent Task Scheduling)
题目链接 题目描述 用2 台处理机A 和B 处理n 个作业.设第i 个作业交给机器A 处理时需要时间i a ,若由机器B 来处理,则需要时间i b .由于各作业的特点和机器的性能关系,很可能对于某些i ...
- Spring 的IOC和DI
IOC:IOC其实就是一种容器,该容器会主动的将资源推送给他所管理的组件, 组件所要做的仅是一种合适的方式来接受资源,这种行为也被称为查找的被动形式! IOC的反转控制:传统应用程序是由我们自己在对象 ...