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

地址：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. IClientMessageInspector IDispatchMessageInspector

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. VBA For Each循环

    For Each循环用于为数组或集合中的每个元素执行语句或一组语句.For Each循环与For循环类似; 然而,For Each循环是为数组或组中的每个元素执行的. 因此,这种类型的循环中将不存在步 ...

  3. H5 - 简学

    什么是HTML? HTML 是用来描述网页的一种语言. 0.HTML 指的是超文本标记语言 1.HTML 不是一种编程语言,而是一种标记语言 2.标记语言是一套标记标签 3.HTML 使用标记标签来描 ...

  4. jQuery遍历(1)

    jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止. 图示解释: 举例: jQuery p ...

  5. vscode教程（基础篇）

    转载:https://segmentfault.com/a/1190000017949680 本文主要介绍vscode在工作中常用的快捷键及插件,目标在于提高工作效率 本文的快捷键是基于mac的,wi ...

  6. spark 机器学习 knn 代码实现(二)

    通过knn 算法规则,计算出s2表中的员工所属的类别原始数据:某公司工资表 s1(训练数据)格式:员工ID,员工类别,工作年限,月薪(K为单位)       101       a类       8年 ...

  7. 脚本shell

    vim删除以#,空格开头的行   1,删除以#号开头的行: :g/^#/d :%s/^#.*\n 2,删除以空格开头的行: :g/^\s/d                “\s代表空格” :%s/^ ...

  8. LearnOpenGL学习笔记（一）画个三角形

    开始学习OpenGL,参考的是著名的LearnOpenGL这个网站,在这里做一些总结性的记录,只是方便自己日后查找或者记录自己的一些拓展思考,关于OpenGL的具体内容请移步: https://lea ...

  9. MySQL进阶19--函数的创建(举例)/设置mysql的创建函数的权限/查看(show)/删除(drop) / 举4个栗子

    /*MySQL进阶19 函数 存储过程和函数:都类似于java中的方法; 存储过程和函数通用好处: 1.提高代码的重用性 2.简化操作 好处: 减少操作次数,减少了编译次数,减少了和服务器的连接次数, ...

  10. Android 测试-Robolectric，mockito，esspresso

    代码参考:https://github.com/googlesamples/android-testing 解释参考: https://www.jianshu.com/p/5732b4afd12f 官 ...