微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中。

步骤一:下载项目图标

步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64。用网址https://transfonter.org/转换)

转换成功后会得到三个文件demo.html、iconfont.ttf、stylesheet.css。

步骤三:把转换成功的文件放入微信小程序

这是我项目的部署文件 static(静态文件,存放images、css)

把stylesheet.css改成stylesheet.wxss

建立一个文件iconfont.wxss(等下会有用,不建立关系也不大,看自己需求)

iconfont.wxss代码

@import "stylesheet.wxss";
@font-face {
font-family: 'iconfont';
src: url('/lib/iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family: "iconfont" !important;
font-size: 12px;
font-style: normal;
} .icon-home:before{content:'\e613';}
.icon-home1:before{content:'\e7a3';}
.icon-gouwuche:before{content:'\e60c';}
.icon-gouwuche1:before{content:'\e602';}
.icon-huiyuan:before{content:'\e664';}
.icon-huiyuan1:before{content:'\e714';} .icon-daifukuan:before{content:'\e610';}
.icon-yiwancheng:before{content:'\e616';} .icon-daifahuo:before{content:'\e61d';}
.icon-daishouhuo:before{content:'\e663';}

建立这个文件的目的是把 阿里图标所有相关文件都在这个文件里处理,其他文件只需要调用这个confont.wxss即可

项目调用

index.wxss调用

/* 阿里图标样式*/
@import "/static/ali-icon/iconfont.wxss";

index.wxml调用

<text class="iconfont icon-gouwuche"></text>

注意:微信小程序使用阿里图标的时候会报错,应该是不兼容问题;不过并不影响正常使用图标。

微信小程序使用阿里图标的更多相关文章

  1. 微信小程序使用阿里图标-iconfont

    步骤一:下载项目图标 步骤二:解压文件,重命名 iconfont.css为 iconfont.wxss ,并复制 到项目 static文件夹 icon文件夹下                     ...

  2. 微信小程序使用字体图标

    项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网 ...

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

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

  4. 微信小程序内容组件图标 icon

    小程序内置了一下图标可以用 需要自定义图标的看这里 ==>微信小程序中使用iconfont/font-awesome等自定义字体图标 小程序内置图标使用示例 <icon type=&quo ...

  5. 微信小程序 - 提取字体图标与其优化

    微信小程序,无论是字体图标还是图标,都差不多,只不过是为了以后字体图标修改方便,或者加效果方便而使用它而已! 1. 下载font-awesome http://fontawesome.dashgame ...

  6. 微信小程序 使用字体图标 iconfont

    第一步:在阿里巴巴矢量图标库下载需要的图标 地址:https://www.iconfont.cn/ 添加至项目 第二步:打开在线代码 将在线代码复制 第三步:点击下载至本地下载图标 将下载的downl ...

  7. 微信小程序 - 使用字体图标(阿里云库)

    实现 阿里图库:https://www.iconfont.cn/ CSS3:[attribute*=value] 选择器 步骤 1. 加入购物车 2. 下载代码解压,复制iconfont.css ap ...

  8. 微信小程序的桌面图标问题

    提问: 笔者在发布小程序后,发现无法在安卓手机创建桌面图标,而其它的小程序却可以. 回答: 在小程序后台页面(从公众平台进入)完整填写小程序的信息,之后便可创建桌面图标. 这可能是微信的某种筛查机制在 ...

  9. 微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)

    前提 需要安装好 nodejs (略) 用于下载插件 安装插件 npm install mini-program-iconfont-cli --save-dev 初始化配置文件 npx iconfon ...

随机推荐

  1. (转载)跟我一起学习VIM - The Life Changing Editor

    原文: http://ju.outofmemory.cn/entry/79671 前两天同事让我在小组内部分享一下VIM,于是我花了一点时间写了个简短的教程.虽然准备有限,但分享过程中大家大多带着一种 ...

  2. Eclipse Git下载问题:Internal error; consult Eclipse error log

    在使用Git下载代码时偶尔会遇到  Internal error; consult Eclipse error log 这个报错. 简述下个人解决思路: Eclipse 错误日志报错为:org.ecl ...

  3. JAVA-JSP内置对象之response对象实现页面自动刷新

    相关资料:<21天学通Java Web开发> response对象 实现页面自动刷新1.可以通过response对象的addIntHeader()方法添加一个标题为Refrsh的标头,并指 ...

  4. 基于jQuery8款超赞的评分插件

    基于jquery8款超赞的评分插件.这是一款基于jquery.barrating插件实现的,该评级小部件可灵活设置CSS样式.具体效果请查看演示.效果图如下: 在线预览   源码下载 实现的代码. h ...

  5. 深入理解IoC和DI

    本文章转载自: https://segmentfault.com/a/1190000005602011 最近在研究php的lumen框架和phalcon框架,这两个框架的底层架构都用到了IoC,DI, ...

  6. base64 数据编码原理

    例子 macOS 终端输入:echo d3d3LmNuYmxvZ3MuY29tL3poZW5nYmlu | base64 -D Linux 终端输入:echo d3d3LmNuYmxvZ3MuY29t ...

  7. 【Unity】制作简易定时器(Timer)

    最近开始学习Unity,也想开始学习写一些简单的博客. 在网上学习了一些关于定时器的写法,在此简单总结一下,方便自己以后用到时查阅. 需求:制作定时器,运行3秒后执行第一次,之后每隔3秒执行一次操作. ...

  8. MyEclipse10中配置开发Python所需要的PyDev 绝对靠谱 不忽悠!

    在NLP(自然语言处理)这个领域中,Python具有良好的声誉,于是也想学习一下.首先第一步就是需要在计算机上配置Python环境.由于Python自带的编辑器太简单,使用起来不顺手,于是就考虑在相对 ...

  9. 【C】——strtok()和strtok_r()

    下面的说明摘自于最新的Linux内核2.6.29,说明了strtok()这个函数已经不再使用,由速度更快的strsep()代替 /** linux/lib/string.c** Copyright ( ...

  10. solr报错 ERROR SolrDispatchFilter null:ClientAbortException: java.net.SocketException: Broken pipe 原因是nginx截断了请求

    [root@localhost nginx]# lltotal 36drwx------. 2 www root 4096 Aug 13 13:25 client_body_tempdrwxr-xr- ...