最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法

第一步:下载阿里巴巴矢量图代码;

第二步:将下载下来的文件中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的更多相关文章

  1. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

  2. 微信小程序——引用阿里云字体

    阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标——保存至你的项目——下载你的图标项目——在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...

  3. 微信小程序 引用其他js里的方法

    微信小程序中,在微信官方开发文档我们可以知道 小程序的目录结构 . 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件 ...

  4. 微信小程序引用外部js,引用外部样式,引用公共页面模板

    https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js============= ...

  5. 在微信小程序中使用阿里图标库Iconfont

    首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入i ...

  6. 微信小程序 - tabbar动态更换图标以及文字

    大家不喜欢小程序的tabbar原因之一就是它太死板,tabbar一旦在app.json定义以后文字不能改,图标不能改! 我要自制tabbar!!! 其实在微信更新完1.9.0基础调试以后就推出了更新方 ...

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

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

  8. 微信小程序如何导入字体图标

    前提:我们已经拥有了从阿里图标库下载下来的一系列的字体图标文件1:找个其中的ttf格式的文件,然后打开https://transfonter.org/网站2:点击Add fonts按钮,加载ttf格式 ...

  9. 微信小程序引用外部js

    1.先建立一个common.js, 写我们的外部js 比如: common.js function getTime(){ //下面写我们的代码 .... } function getCity(){ / ...

随机推荐

  1. 【Oracle】DBA_AUDIT_TRAIL表SES_ACTIONS字段对应的操作列表

    SES_ACTIONS字段共包含16个字符,初始状态都为“-”,当被审计的对象被操作后,SES_ACTIONS会在相应的位置作出标识,标识为“S”的代表操作成功,标识为“F”的代表操作失败,16个位置 ...

  2. houxiurong.com 关于Tomcat7部署 一台机器部署两个项目,一个用域名访问,一个用IP访问

    该内容来自 http://houxiurong.com,转载请说明出处. 1.使用IP访问的项目放在Tomcat7 的webapps目录下面:比如:AAA 2.使用域名访问的项目放在Tomcat7的w ...

  3. 根据业务自己设计的.NET工厂模式架构

    最近项目的架构需要做调整优化,根据业务需要写了一个简单的工厂模式架构 项目介绍:整个系统分为三大平台(这里用A,B,C来标示),每个平台又细分为多个APP客户端(每个APP都有appid来区分) 因为 ...

  4. CSS读书笔记(3)---清除浮动的几种方法

    浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en" ...

  5. 图片无损放大工具PhotoZoom如何进行打印设置

    我们使用PhotoZoom对照片进行无失真放大后,想将照片给打印出来需要设置一些常规参数时.那么这些参数我们该从哪里设置,怎么设置呢? PhotoZoom下载:pan.baidu.com/s/1cXb ...

  6. 用shell编写一个三角形图案

    第一种方法 #!/bin/bash read -p "请输入层数: " n for (( i=1; i<=$n;i++ ))do   for (( j=n; j>=i; ...

  7. 搭建`wenblogic`执行`install`脚本失败

    搭建weblogic服务,前期准备都已经完成,安装包都是已上传,执行install_wls1213.sh脚本,出现以下报错: install_wls1213.sh: line 1: rectory: ...

  8. HDU2188 - 悼念512汶川大地震遇难同胞——选拔志愿者【巴什博弈】

    对于四川同胞遭受的灾难,全国人民纷纷伸出援助之手,几乎每个省市都派出了大量的救援人员,这其中包括抢险救灾的武警部队,治疗和防疫的医护人员,以及进行心理疏导的心理学专家.根据要求,我校也有一个奔赴灾区救 ...

  9. Git clone时出现Please make sure you have the correct access rights and the repository exists.问题已解决。

    看了好多资料终于搞定了git 中clone命令报错这个问题,废话不多说直接上步骤希望对大家有帮助. 1   删除.ssh文件夹(直接搜索该文件夹)下的known_hosts(手动删除即可,不需要git ...

  10. tp3.1 白板不报错

    今天有碰上了这种情况, 一般记忆力好把刚才改动的地方恢复一下就好了,但是今天特殊原因编辑器不小心关了,也不知道把那里改坏了,一通乱找,也找不到.汗! 没办法,提交代码几面,用git看下改变的地方,是c ...