第一步:

在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. 团队作业-Beta冲刺(2/4)

    队名:软工9组 组长博客:https://www.cnblogs.com/cmlei/ 作业博客:https://edu.cnblogs.com/campus/fzu/SoftwareEngineer ...

  2. Ubuntu 16.04与Win10双系统双硬盘安装图解

    一.先做准备工作.建议:在当前系统所在的硬盘上,留一片空的主分区安装Ubuntu系统. 2.划分多大的空间够?安装的过程中需要涉及到分区,为了以免日后重装,我的建议是如下分区:1).5G,主分区,空间 ...

  3. Authenticator App 两步验证会不会造成亚马逊账号关联?

    今天听人说,因为用Authenticator App做亚马逊两步验证造成了帐号关联…… 我给大家解释一下Authenticator的实现原理,作为计算机专业科班出身的我,此次从各方面了解并经过自己亲测 ...

  4. linux学习(1):linux命令大全

    Linux命令 目录 1       文件管理... 5 1.1          basename. 5 1.2          cat 5 1.3          cd. 5 1.4      ...

  5. MySQL导入csv文件内容到Table及数据库的自增主键设置

    写在前面 目的是测试将csv文件内容导入到表中, 同时记录一下自增主键的设置. 测试采用MySQL8.0. 新建表customer_info如下, 未设置主键. 修改上表, 添加主键id, 并设置为自 ...

  6. Xamarin图表开发基础教程(3)OxyPlot框架

    Xamarin图表开发基础教程(3)OxyPlot框架 Xamarin.Android中使用OxyPlot框架 在Xamarin.Android平台上实现图表显示需要完成以下的步骤: 1.添加OxyP ...

  7. 解决IDEA中Lombok生成代码后提示错误的问题

    一.背景介绍 因为我们在使用Lombok的时候,Lombok为我们生成的代码是在字节码中(*.class),而不是在source code中,所以存在IDE提示Lombok生成的方法未定义的错误,导致 ...

  8. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(六)- webpack-dev-server 自适应支持手机端访问

    关于EasyDSS EasyDSS商用流媒体服务器解决方案是一套集流媒体点播.转码与管理.直播.录像.检索.时移回看于一体的一套完整的商用流媒体服务器解决方案,EasyDSS高性能RTMP流媒体服务器 ...

  9. [LeetCode] 875. Koko Eating Bananas 可可吃香蕉

    Koko loves to eat bananas.  There are N piles of bananas, the i-th pile has piles[i] bananas.  The g ...

  10. 设置程序崩溃时产生 core 文件的配置

    /* 不限制 core 文件的大小 */ ulimit -c unlimited /* 使用 pid 进行命名 */ echo " > /proc/sys/kernel/core_us ...