第一步:在阿里巴巴矢量图标库下载需要的图标

地址:https://www.iconfont.cn/

添加至项目

第二步:打开在线代码

将在线代码复制

第三步:点击下载至本地下载图标

将下载的download文件解压打开iconfont.css,将文件中的@font-face替换为在线链接(即刚刚复制的代码)。

第四步:将iconfont.css文件中的代码复制到微信小程序使用字体图标的的wxss文件中。

使用实例:

<icon class='iconfont icon-icon_fabu'/>
<icon class='iconfont icon-ditu-dibiao'/>
<icon class='iconfont icon-gongdanqueren'/>
<icon class='iconfont icon-kongxinduigou'/>
<icon class='iconfont icon-icon_zhanghao'/>

  

效果

原文:https://www.jianshu.com/p/10cb579539f0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

微信小程序 使用字体图标 iconfont的更多相关文章

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

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

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

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

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

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

  4. uni/微信小程序 - 使用字体图标

    阿里字体图标:http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 1.单个/ 多个选择字体图标 2. 导入字体库 可以参考 ...

  5. 微信小程序使用字体图标的方法

    一.先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 从项目里下载下来并解压,找到ttf格式文件 二.到这个平台https://tran ...

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

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

  7. 微信小程序自定义字体及自定义图标问题说明

    自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添 ...

  8. 微信小程序使用阿里图标

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...

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

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

随机推荐

  1. https://mirrors.ustc.edu.cn/docker-ce/linux/centos/docker-ce/repodata/repomd.xml:HTTPS Error 404 - Not Found

    1.按照菜鸟教程,安装docker,竟然报如题错误 2.然后发现,自己再添加软件源信息的时候,自作聪明的把centos换成了自己的主机名 3.那么需要重新来,先删除 cd  /etc/yum.repo ...

  2. UI5-技术篇-Hybrid App-1-Barcode扫描

    参考资料: https://www.w3cschool.cn/cordova/cordova_overview.html https://blogs.sap.com/2017/01/03/sapui5 ...

  3. CoAP协议

    CoAP(Constrained Application Protocol) CoAP是6LowPAN协议栈中的应用层协议 CoAP是超轻量型协议 CoAP的默认UDP端口号为5683 1. 四种消息 ...

  4. MacOS中创建Sublime Text3快捷方式返回Operation not permitted的原因及解决

    在类Unix系统中我们可以很随心的添加一些程序在终端里快捷方法,比如将一些常用的工具放在/usr/bin下面 Sublime Text3是一个小巧精致而又功能强大的程序,而且本猫也安装了Swift语言 ...

  5. C#基础 - 定义变量,输入输出

    本节课主要讲解C#的发展历史及部分C#语言基础, 主要内容有:控制台程序的创建,输出,输入,定义变量,变量赋值,值覆盖,值拼接,值       打印,两种数据类型,整形类型转换 本节重点难点:定义变量 ...

  6. VMware网络配置三种网络模式(桥接、NAT、Host-only)

    VMware网络配置三种网络模式(桥接.NAT.Host-only) 一.虚拟安装后三种网络模式显示 当安装好后,的“虚拟网络编辑器”中也存在三种模式,分别对应:桥接-VMnet0.Host-only ...

  7. Vue框架之初识

    介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式.实际的DOM操作和输出格式被抽象的方式到 ...

  8. rhel7下安装EPEL源

    1.rhel7安装aliyun下的epel源 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo

  9. 修改虚拟机磁盘uuid

    cd 到这个目录: C:\Program Files\Oracle\VirtualBox> ####  sethduuid 后为 路径+文件名. VBoxManage internalcomma ...

  10. VSCode安装程序——java开发

    文章:微软为 Java 开发者推出 VSCode 安装程序 文章介绍微软为VSCode提供了开发程序,方便java开发者更好的使用VSCode