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

地址: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. linux 基础指令

    df -h 查看磁盘空间 root@ubuntu:/etc# df -h Filesystem Size Used Avail Use% Mounted on udev 970M 0 970M 0% ...

  2. galera集群

    一.环境准备 1.各主机配置静态域名解析: cat /etc/hosts 127.0.0.1   localhost localhost.localdomain localhost4 localhos ...

  3. 在使用pandas获取网上数据报出url错误的解决办法

    在使用pandas.read_csv('网址名')时,出现url错误是,需要在导包出添加一下两句代码 import ssl ssl._create_default_https_context = ss ...

  4. Python函数Day4

    一.内容补充 __iter__() 就是 iter(),iter() 调用的就是__iter__() __next__() 就是 next(),next()调用的就是__next__() __clos ...

  5. 动态URL是什么?动态URL有什么特点?

    动态URL是什么动态URL就是动态页面,动态链接,即指在URL中出现“?”这样的参数符号,并以aspx.asp.jsp.php.perl.cgi为后缀的url. 动态URL有什么特点1.在建设反向链接 ...

  6. 【OF框架】搭建标准工作环境

    前言 统一工作环境,统一工具集,是沟通效率的基础.如同语言一样,使用不同语言的人,需要花更多的精力去理解语言,然后才是理解语言的内容,而使用相同语言的人,对话过程直接进入到内容.对于语言不统一增加的效 ...

  7. 中文论文-LaTex模板

    \documentclass[10pt,UTF8]{article} \usepackage{ctex} \usepackage{amssymb,amsmath,multicol,titlesec} ...

  8. 'Cloud Native': What It Means, Why It Matters

    When HP announced July 28 that it was acquiring ActiveState's PaaS business, senior vice president B ...

  9. 小技巧:with用法 pycharm控制台输出带颜色的文字 打印进度条的

    with用法 with用法在python中是一个很独特的用法,因为别的语言的中没有这个用法.所以针对这个特点我们来做一次总结,什么样的情况下可以同with  我们学到的有文件的操作,和acquire  ...

  10. Codeforces Round #609 (Div. 2) C. Long Beautiful Integer

    链接: https://codeforces.com/contest/1269/problem/C 题意: You are given an integer x of n digits a1,a2,- ...