本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下,

使用时:
 

<span class="el-icon-setting"></span>

  

下面是重点引入阿里库

3步就好。

1: 进入阿里图标库网站:  https://www.iconfont.cn/  然后用github账户登录

2:   搜索一个图片加入购物车.

3:点击 购物车, 加入项目之中, 然后下载到本地,

4: 把下载的文件丢入vue项目的 assets -> icon 文件夹里面,

 打开的内容是这样的

5: 在main.js 中引入这个文件

项目中的使用

<span class="iconfont icon-shezhi"></span>

  

VUE 引入阿里图标库的更多相关文章

  1. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  2. vue 引入阿里图标

    1.去阿里图标矢量图标库将想要的图标添加入库 2.再去库中将图标添加到项目. 3.再到我的项目中,选择,我这里采用的是将图标代码包下载到本地再引入到vue项目中. 4.在vue项目的assets文件夹 ...

  3. VUE引入字体图标库

    1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class ...

  4. Vue引用阿里图标库

    首先进入官网http://www.iconfont.cn/ 转载:https://blog.csdn.net/qq_34802010/article/details/81451278 选择图标库 在里 ...

  5. flutter 引入第三方 Icon 图标(以阿里图标库为例)

    在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...

  6. 【vue.js】vue项目使用Iconfont(阿里图标库)

    vue项目使用Iconfont(阿里图标库) 2019-11-12  19:07:02  by冲冲 1.操作步骤 ① 登录阿里巴巴矢量图标库 https://www.iconfont.cn ,注册账号 ...

  7. 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)

    1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...

  8. 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

  9. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

随机推荐

  1. day061 cookie和session

    一. cookie 1.cookie 的原理 工作原理是:浏览器访问服务端,带着一个空的cookie,然后由服务器产生内容, 浏览器收到相应后保存在本地:当浏览器再次访问时,浏览器会自动带上Cooki ...

  2. [转]Python机器学习笔记 异常点检测算法——Isolation Forest

    Isolation,意为孤立/隔离,是名词,其动词为isolate,forest是森林,合起来就是“孤立森林”了,也有叫“独异森林”,好像并没有统一的中文叫法.可能大家都习惯用其英文的名字isolat ...

  3. python selenium-webdriver 元素操作之鼠标操作(四)

    上节内容主要说明了元素的定位,本节内容说要说对元素的操作,元素的操作分为两部分一部分是鼠标的操作,另一种是对键盘对元素的操作,下面我们主要讲解一下鼠标对元素的操作. webdriver 模块中几种比较 ...

  4. Hadoop 2.x 版本的单机模式安装

    Hadoop 2.x 版本比起之前的版本在Hadoop和MapReduce上做了许多变化,主要的变化之一,是JobTracker被ResourceManager和ApplicationManager所 ...

  5. NanoPC-T4/RK3399开发板Ubuntu FriendlyCore系统开机自动运行客户程序

    RK3399开机自动运行客户程序 比如hellohello.c 交叉编译:aarch64-linux-gcc hello.c -o hello使用SecureCRT软件通过串口下载到开发板rz修改文件 ...

  6. mysql 8.0 主从复制的优化

    mysql 8.0复制改进一简介: 基于GTID下的并行复制,本文不考虑MGR架构二 主要特性   1 基于writeset的下的改进型并行复制     我在之前的一篇文章关于并行复制中详细的介绍了关 ...

  7. promise 基础知识

    promise 基础知识 proise:1.Promise是异步编程的一种解决方案,它有三种状态,分别是pending-进行中.resolved-已完成.rejected-已失败2.创建实例//met ...

  8. day02python基本数据类型

    python基本数据类型   基本数据类型(int,bool,str) 1.基本数据数据类型: int 整数 str 字符串. 一般不存放大量的数据 bool 布尔值. 用来判断. True, Fal ...

  9. redis4.0.13主从、哨兵、集群3种模式的 Server端搭建、启动、验证

    本文使用的是redis-4.0.13.tar.gz版本. 两个centos7系统虚拟机:192.168.10.140.192.168.10.150 redis各版本下载地址:http://downlo ...

  10. 2016310Exp4 恶意代码及分析

    网络对抗 Exp4 恶意代码分析 实验内容 系统运行监控 恶意软件分析 报告评分 基础问题回答 实践目标 实验内容 1. 系统运行监控——计划任务 2. 系统运行监控——利用Sysmon 3.1恶意软 ...