第一步:

在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去

  

第二步:

在项目中,可以看到刚刚加入的图标,这里是你在项目中所有用到的iconfont,选择下载至本地

第三步:

将下载的压缩包解压,将其中的css、eot、svg、ttf、woff文件放入到你的项目中(若项目之前有这些文件,则直接替换即可,因为下载的文件中包含了你项目中所有的图标),此时可以看到,css、svg中加入了你想要的图标

第四步:

以上三步就已经将你想要的iconfont加到项目中了,只要使用时,通过 i.iconfont.icon-guanlianshebei 引用即可

前端小白技术摸索中,若有误,望指正!

关于阿里 iconfont 的使用步骤的更多相关文章

  1. vue 中使用阿里iconfont彩色图标

    在main.js中 import './assets/images/iconfont/iconfont.css'import './assets/images/iconfont/iconfont.js ...

  2. day 51 阿里iconfont的使用

    阿里iconfont的使用   1. 找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中 ...

  3. Hexo-使用阿里iconfont图标

    Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...

  4. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  5. vue安装openlayers,jquery,bootstrap,阿里iconfont,

    安装 安装openlayers安装指定包安装openlayersVUE中的地图import ol from "openlayers";import "openlayers ...

  6. 阿里iconfont引入方法

    原文:iconfont的引入方法   第一步:使用font-face声明字体@font-face {font-family: 'iconfont';src: url('iconfont.eot'); ...

  7. uni-app引入阿里iconfont

    前言: 目前正在通过 UNI-APP平台开发移动应用,uni-app平台是去年年出才创建的一个新品台,因此资源相对比较匮乏,在此遇到一个问题,一直使用别人提供的iconfont,但总是不够用,为了解决 ...

  8. 阿里iconfont的使用

    1.找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中一个账号登陆一下就行了 假如你使用 ...

  9. uniapp如何使用阿里iconfont

    1.将iconfont中需要的图标,添加到购物车,然后添加到自己的项目.生成在线代码. 2.点击下载至本地.然后解压后复制 iconfont.css 文件到你的项目. 3.复制第一步生成的代码,替换i ...

随机推荐

  1. PyTorch 实战:计算 Wasserstein 距离

    PyTorch 实战:计算 Wasserstein 距离 2019-09-23 18:42:56 This blog is copied from: https://mp.weixin.qq.com/ ...

  2. 算法名称 Alias Method

    public class AliasMethod { /* The probability and alias tables. */ private int[] _alias; private dou ...

  3. 一款阿里开源的 Java 诊断工具

    Arthas是什么鬼? Arthas是一款阿里巴巴开源的 Java 线上诊断工具,功能非常强大,可以解决很多线上不方便解决的问题. Arthas诊断使用的是命令行交互模式,支持JDK6+,Linux. ...

  4. 《精通CSS第3版》(5)漂亮的盒子

  5. ISO/IEC 9899:2011 条款1——范围

    1. 范围 1.本国际标准指定了C编程语言的形式并建立了对用C编程语言进行编写程序的诠释.[注:国际标准的设计是用于提升在多种数据处理系统中的C程序的可移植性.其目的在于能够被实现者与程序员所使用.] ...

  6. 【Git】.git/FETCH_HEAD: Permission denied 的解决方法

    背景: 用webhook去拉取代码.报错 .git/FETCH_HEAD: Permission denied 原因分析:.git/FETCH_HEAD的这个文件所属组和所属主是root权限,而我用w ...

  7. zabbix解决中文乱码

    解决中文乱码 yum install -y wqy-microhei-fonts #解决方法 中文乱码 \cp /usr/share/fonts/wqy-microhei/wqy-microhei.t ...

  8. oracle 常用命令【创建表空间用户及删除】

    /*第1步:创建临时表空间 */ create temporary tablespace ZJY_TEMP tempfile '/usr/u01/app/oradata/orcl/ZJY_TEMP.d ...

  9. 使用office365 world2016发布编辑备份你的博客

    开门见山.   如果你曾使用过live writer或者world 2013及之前版本发布过博客,那么请直接异步到最后的tips来查找你可能遇到的问题.     在office365中找到博客模板 打 ...

  10. 第1/7Beta冲刺

    1.团队成员 成员姓名 成员学号 秦裕航 201731062432(组长) 刘东 201731062227 张旭 201731062129 王伟 201731062214 2.SCRU部分 2.1各成 ...