第一步:

在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. mysql索引原理及优化(三)

    B+Tree原理详解 MyISAM中的 B+Tree (非聚簇索引) MYISAM中叶子节点的数据区域存储的是数据记录的地址 主键索引 辅助索引 MyISAM存储引擎在使用索引查询数据时,会先根据索引 ...

  2. winrunner 测试工具

    WinRunner在项目中的作用     (winrunner测试设计:http://blog.chinaunix.net/uid/301743/year-2013-list-81.html?/178 ...

  3. redis中get值显示为16进制字符串的解决方法

    Linux系统中,通过xshell登录redis,当根据某个key进行get取值时,取到的值为“\xc2\xed\xc0\xad\xcb\xb9\xbc\xd3”格式的十六进制字符串,原因是值中的中文 ...

  4. PostMan Request Export

  5. 【c++基础】C与C++接口相互调用

    前言 编译程序的时候出现错误,入口程序如果是cpp文件可以编译成功,如果是c程序则出错.一般这个问题是c与c++之间接口相互调用出现的问题. 出现的错误是undefined reference to ...

  6. [LeetCode] 461. Hamming Distance 汉明距离

    The Hamming distance between two integers is the number of positions at which the corresponding bits ...

  7. OpenJudge 1088 滑雪

    总时间限制: 1000ms 内存限制: 65536kB 描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者 ...

  8. 【剑指offer】面试题 20. 表示数值的字符串

    面试题 20. 表示数值的字符串

  9. Storm Kafka与配置和代码集成

    1.目标 - 风暴卡夫卡整合 在本Kafka教程中,我们将学习Storm Kafka Integration的概念.此外,我们将在此Kafka Storm集成教程中讨论Storm架构,Storm Cl ...

  10. 函数的练习3——python编程从入门到实践

    8-12 三明治: 编写一个函数,它接受顾客要在三明治中添加的一系列食材.这个函数只有一个参数(它收集函数调用中提供的所有食材),并打印一条消息,对顾客点的三明治进行概述.调用这个函数三次,每次提供不 ...