本身项目是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. lua 匹配空白符

    lua 支持的所有字符类: .     任意字符%s 空白符 空白字符一般包括空格.换行符\n.制表符\t以及回到行首符\r%p 标点字符%c 控制字符%d 数字%x 十六进制数字%z 代表0的字符% ...

  2. osx免驱网卡推荐

    1. 单频2.4G芯片为Realtek RTL8188cu, RTL8192cu,都可以用,如TP-Link TL-WN821N.TP-Link TL-WN823N等等:2. 单频2.4G芯片为Med ...

  3. python中防止字符串转义

    有学生问了个问题,试了好多办法都不行,搜也搜不到,只能自己尝试了,顺利解决. 问题描述: 如果一个字符串包含转义字符,如“adfdfasd\tfdsadf\t”,正常print会将\t看作转义字符ta ...

  4. Linux shell 重定向学习笔记

    在了解重定向之前,我们先来看看linux 的文件描述符. linux文件描述符:可以理解为linux跟踪打开文件,而分配的一个数字,这个数字有点类似c语言操作文件时候的句柄,通过句柄就可以实现文件的读 ...

  5. IDEA编译时出现 Information:java: javacTask: 源发行版 1.8 需要目标发行版 1.8

    错误如下 检查下面几个地方设置是否一致... 1.Project Structure下(File->Project Structure...) Sources选项卡->Languate l ...

  6. template or render function not defined vue 突然报错了,怎么解决

    报错图例如下:template or render function not defined vue 突然报错了,怎么解决什么错误呢,就是加载不出来,网上看了一通,是vue版本不对,是vue-comp ...

  7. js对象的创建

    一.通过对象直接量来创建 var emptyt={};  //相当于var empty=new Object; //如果属性名中包含空格.连字符(-).还有关键字,保留字时,要用字符串表示 var b ...

  8. axublogcms1.1.0 Getshell

    axublogcms1.1.0 Getshell 代码执行漏洞 现在最新版是1.1.0   今天重新审计了下 axublogcms1.0.6 ,发现一处计较鸡肋的漏洞,因为并不是只有1.0.6版本存在 ...

  9. amd显卡更新最新驱动鼠标顿卡的解决方法

    测试了下游戏,很稳.方法:在卡顿的状态下打开RADEON设置,依次点击显示器→规格→覆盖,将支持HDCP选为禁用,按提示重启即可.

  10. Go 1.11 Module 介绍

    title: "Go 1.11 Module" date: 2018-10-26T23:50:56+08:00 draft: false --- Go 1.11 Module 介绍 ...