第一步：登录iconfont的账号，创建项目。

第二步：选择自己需要的图标，并添加入库（就是那个购物车的图标）。

第三步：将选好的图片添加到项目。（点击上图中右上角的购物车图标）。

第四步：下载资源到本地，并解压。

第五步：将iconfont.css和iconfont.ttf 复制到自己的工程中（我这里是放在static下）。

第六步：修改iconfont.css中的@font-face 下的ttf的 src（src 使用的是绝对路径，我这里只保留了ttf）。

第七步：在使用的文件中使用import 引入，通过类名选择图标。

如果是添加新的图标，重新走第二三四步。第五步只需要替换。.ttf文件

以此篇博客结束即将过去的2021 。希望新的一年越来越好！

小程序中使用、H5、uniapp下使用阿里巴巴iconfront图标或者新增图标的更多相关文章

  1. 一招解决微信小程序中的H5缓存问题

    一招解决微信小程序中的H5缓存问题1.问题描述开发过程中,为了更新代码方便,往往会在小程序中嵌入H5页面.但问题来了,小程序原生代码更新版本后,简单的从微信中删除或者代码强刷就可以解决缓存问题,但小程 ...

  2. 微信小程序中如何实现分页下拉加载？（附源码）

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  3. 在微信小程序中，如何实现下拉刷新（模拟刷新）

    一.在app.json中启动刷新, 在Windows 中, 添加  "enablePullDownRefresh":"true" 二.在需要刷新的页面中写(若是 ...

  4. 小程序中嵌套的h5页面设置分享转发

    场景描述:当在小程序中打开h5页面时,希望小程序的转发出去的标题,图片,跳转link可以通过h5通信实现自定义. 实现方式:通过h5给小程序通信,发送标题,图片,跳转link等信息,让小程序设置分享. ...

  5. 在小程序中引入有赞的vant框架组件

    这里给大家讲解小程序中如何引入vant组件(我这里是采用小程序的云开发模板) 1.首先在项目的miniprogram文件夹右键在终端中打开,输入命令npm init初始化生成一个package.jso ...

  6. uni-app - 支付（app支付、小程序支付、h5（微信端）支付）

    App支付.小程序支付.h5(微信端)支付 APP支付(内置) appPay.js /** * 5+App支付,仅支持支付宝以及微信支付 * * 支付宝Sdk集成,微信sdk未集成 * * @para ...

  7. 微信小程序和微信H5测试中易出Bug的点和注意事项

    一.微信小程序 易出Bug的点: 小程序的分享转发功能 背景:小程序项目开发基本完毕也都已经测过几轮,功能上基本没有什么问题,但是上线后却被客户发现通过分享转发小程序给别人,别人无法正常打开的情况 原 ...

  8. 微信小程序中使用 <web-view> 内嵌 H5 时，登录问题的处理方法

    在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...

  9. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

随机推荐

  1. Learning Spark中文版--第四章--使用键值对（1）

      本章介绍了如何使用键值对RDD,Spark中很多操作都基于此数据类型.键值对RDD通常在聚合操作中使用,而且我们经常做一些初始的ETL(extract(提取),transform(转换)和load ...

  2. git 日志技术

    1.git log, 在一个分支下, 以时间的倒序方式显示你制造的所有commit列表,包含创建人,时间,提交了什么等信息: 2. git reflog, 获取您在本地repo上还原commit所做工 ...

  3. 转 Android中Activity的启动模式（LaunchMode）和使用场景

    转载请注明出处:http://blog.csdn.net/sinat_14849739/article/details/78072401本文出自Shawpoo的专栏我的简书:简书 一.为什么需要启动模 ...

  4. Mockito 简介

    Mockito 是一种 Java Mock 框架,主要是用来做 Mock 测试,它可以模拟任何 Spring 管理的 Bean.模拟方法的返回值.模拟抛出异常等等,在了解 Mockito 的具体用法之 ...

  5. Python初探——sklearn库中数据预处理函数fit_transform()和transform()的区别

    敲<Python机器学习及实践>上的code的时候,对于数据预处理中涉及到的fit_transform()函数和transform()函数之间的区别很模糊,查阅了很多资料,这里整理一下: ...

  6. MQTT协议 - arduino ESP32 通过精灵一号 MQTT Broker 进行通讯的代码详解

    前言 之前研究了一段时间的 COAP 协议结果爱智那边没有测试工具,然后 arduino 也没有找到合适的库,我懒癌发作也懒得修这库,就只能非常尴尬先暂时放一放了.不过我在 爱智APP -> 设 ...

  7. 别被调查汇总郁闷到——有Excel呢！

    年初的某天,我在家待得好好的,好吧,其实也不是待得好好的,这事大家都知道,新冠病毒嘛,都锁家里了,还好本妖向来宅--呃--跑题了--肥来! 其实我能在家好好地待着,有水有电有Wi-Fi,那是有多少人冒 ...

  8. AtCoder Beginner Contest 169 题解

    AtCoder Beginner Contest 169 题解 这场比赛比较简单,证明我没有咕咕咕的时候到了! A - Multiplication 1 没什么好说的,直接读入两个数输出乘积就好了. ...

  9. win10 linux ubuntu子系统 使用adb

    条件 本文已经默认你已经在win10系统下成功配置了ubuntu子系统,所以唯一的条件就是windows上的adb 版本和ubuntu子系统的adb版本一致. 方法 怎么来保证adb 版本一致呢?在本 ...

  10. LuoguP7072 [CSP-J2020] 直播获奖 题解

    Update \(\texttt{2020.11.13}\) 修改了一个小细节. \(\texttt{2020.11.16}\) 修改了一个错误. Content 有一场 \(n\) 个人的比赛,计划 ...