本身项目是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. 2015沈阳站-Meeting 最短路

    http://acm.hdu.edu.cn/showproblem.php?pid=5521 题目大意:A,B两个人分别在1和n区.给出区之间有联系的图以及到达所需时间.求两个人见面最短时间以及在哪个 ...

  2. 20175202 《Java程序设计》迭代和JDB

    一.任务详情 二.设计过程的问题及解决 1.程序编译时一直提示编译出现错误. 原因及解决:本以为声明对象和创建对象一起进行时,可以直接采用如zhubajie = new Xiyoujirenwu(); ...

  3. .NET 使用 Azure Blob 存储图片或文件

    使用的是VS2017 一.先使用 NuGet 获取这两个包. 执行以下步骤: 在“解决方案资源管理器”中,右键单击你的项目并选择“管理 NuGet 包”. 1.在线搜索“WindowsAzure.St ...

  4. Unity 3D类结构简介

    趁着周末,再来一发.对于Unity3D,我也是刚开始学习,希望能够与大家多多交流.好了,废话不多说,下面继续. 本篇文章使用C#进行举例和说明.关于Unity 3D编辑器中的各种窗口,网上有很多资料了 ...

  5. .NET Remoting、WebService、WCF、WebApi一些简单描述

    1. .NET Remoting是传输层协议TCP封装的,速度非常快,.NET Remoting基于.net反射机制,只方便.net使用,因此它有平台限制.(.NET Remoting的工作原理:服务 ...

  6. Mysql中判断一个点是否落在多边形内

    关于地理空间数据,经常需要处理两个空间数据的关联关系.有很多种方法可以处理,通过编写程序算法,或者是调用数据库中对应的function.在mysql数据库中,https://dev.mysql.com ...

  7. Win10系统下Anaconda下安装多种Python函数库

    建议直接安装Anaconda,这是一个包含Numpy,Pandas,Sklearn等函数库的计算机科学软件包,下面的软件可以在此环境下进行安装下载. 一.计算机视觉 1. OpenCV图像处理 在ht ...

  8. 前端需要了解的HTTP协议

    目录 HTTP协议 HTTP概述 HTTP之URL HTTP状态码 HTTP首部 HTTP首部字段 HTTP通用首部字段 HTTP请求首部字段 HTTP工作原理 HTTP报文内的HTTP信息 HTTP ...

  9. window7 修改docker安装的machine 位置

    win7下安装docker ,默认的machine location 是在C:\users\xx\.docker\machine\machines 下面,为了不占用系统盘,想修改盘符位置 google ...

  10. mybatis与Spring

    提问1:如果没有spring-mybatis,我们如何在spring中使用定义bean,如何使用事务? mybatis-Spring为我们带来多种方式的Mapper接口的注册,扫描,识别. 如果不使用 ...