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

地址: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. redis设置密码,解决重启后密码丢失及自启服务配置

    一.安装redis redis3.0及redisManage管理工具 链接:https://pan.baidu.com/s/1p5EWeF2Jgsw9xOE1ADMmRg 提取码:thyf 二.red ...

  2. 免root xshell连接termux

    免root实现xshell连接termux termux为安卓手机上的一款模拟linux终端的应用,由于手机上打字比较麻烦,所以想到了用电脑上的xshell通过ssh连接termux,以实现电脑控制t ...

  3. falcon 数据丢失处理方法参考

    背景:使用 netstat -ano | grep ESTABLISH | grep 11883 监控 send_Q 和 recv_Q 的值,由于单次推送数据量在1w条以上,导致falcon-agen ...

  4. CSS3Ps -Photoshop图层特效转CSS3代码

    CSS3Ps 这个ps插件可以将ps图层特效直接转化成css3代码,对前端非常有益. 插件下载:http://css3ps.com/Download/

  5. 使用node建立本地服务器访问静态文件

    最终目录结构 demo │ node_modules └───public │ │ index.html │ │ index.css │ └───index.js └───server.js 一.使用 ...

  6. jmeter学习笔记(三)配置元件之HTTP信息头管理

    使用jmeter模拟发送http请求时,有些请求是需要带上HTTP请求头里面的信息.比如页面需要登录信息的,那个就需要用户登录信息authorization.这个时候是需要使用到HTTP信息头管理器. ...

  7. FreeRTOS 移植

    添加FreeRTOS源码到工程中 在工程源码中创建FreeRTOS目录存放拷贝的文件 拷贝FreeRTOS->Source中的文件 可将其他不需要的文件夹全部删掉,只留3个 拷贝Demo中Fre ...

  8. PyCharm提示ModuleNotFoundError: No module named 'pymysql'

    初学python,连接mysql时遇到了提示pymysql模块导入有问题,本人虽是window系统,解决思路是一样的 代码如下: import pymysql#打开数据库,参数依次为:主机名/IP,用 ...

  9. Vue列表动画----自己做的

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 【robotframework】robotframework环境搭建

    一.基于python3.6环境 在dos命令输入 pip install robotframework 在线安装robotframework在dos命令输入 pip install Pypubsub= ...