本身项目是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. FlexRay通信机制

    通信周期是 FlexRay 的基本通信单元[6~7,19].每个通信周期包括四个时间层,如图 2-9 所示.通信周期由静态段(Static Segment).动态段(Dynamic Segment). ...

  2. 2019CVTE技术支持软件编程2

    题目:有8位数密码,加密规则如下:第一步取最后一位数:第二部将倒数第二位数放到最前形成一个新数,再取新数最后一位,以此循环取完所有数为止:如98698426,密码为64982689,时间复杂度为O(N ...

  3. edgedb 内部pg 数据存储的探索 (五) 运行进程列表信息

    做为一个简单的记录,方便后期分析学习 当前包含了一个timescale 的extension 可以不用关注 信息 ps -ef |grep edgedb edgedb 10559 24858 0 4月 ...

  4. java8_api_math

    java.math包    BigDecimal    BigInteger    MathContext    RoundingMode这是枚举        BigDecimal        不 ...

  5. [转]Linux编译和安装boost库

    1. 下载boost安装包并解压缩 到http://www.boost.org/下载boost的安装包,以boost_1_58_0.tar.gz为例 下载完成后进行解压缩: tar zxvf boos ...

  6. 使用透视表pivot_table

    使用透视表pivot_table 功能:从一张大而全的表格中提取出我们需要的信息来分析 import pandas as pd unames = ['user_id', 'gender', 'age' ...

  7. Java中级开发工程师知识点归纳

    (一)Java 1.接口和抽象类的区别 ①抽象类里可以有构造方法,而接口内不能有构造方法. ②抽象类中可以有普通成员变量,而接口中不能有普通成员变量. ③抽象类中可以包含非抽象的普通方法,而接口中所有 ...

  8. Web高级 网站安全

    1. SQL注入 虽然现在SQL注入发生的情况总的来说越来越少,还是提二句.关于什么是SQL注入大家都知道就不多说了. 1.1 原理 我们在做前端页面的时候,少不了会又各种输入框,然后通过GET或者P ...

  9. Laya for H5 之Bug追踪

    Laya For H5之Bug追踪 H5游戏一旦上线后,如何跟踪用户的崩溃日志呢?现在有很多第三方的工具,比如fundebug,其sdk接入简单,只需寥寥几行代码就可以追踪h5游戏的崩溃日志,bug日 ...

  10. C# 6.0:nameof操作符

    C# 6.0 引入了一个名为“nameof”的新的操作符,它的作用是接收元素而后返回元素名字.这个操作符能将class和class的所用成员,比如方法.变量以及属性作为参数而后返回一个它们的名字.这避 ...