【Vue】 element ui 引入第三方图标

原创 2017年10月19日 16:57:06

一·背景

最近一个项目用到 vue 和 element ui开发前端。感觉<img>方式引入png图标比较鸡肋,所以决定把图标整合到element ui。截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅读后总结也不能正常引入第三方图标,所以决定写一篇引入引入第三方图标的教程。

二·

1·基于阿里巴巴矢量图标库的一篇教程,地址;http://www.iconfont.cn/

2·进入网站登录账户后,新建一个项目


在该网站选择一些自己要用到的图标如上图点击购物车按钮添加到购物车。

3·把购物车添加的图标添加至自己新建的项目如下图


4·然后在下图,图标管理,我的项目里找到你项目所添加的图标。


5·除了从该网站选择你要用到的图标外还可以点击上图右上角处自己上传svg格式图标到阿里矢量库。( 官方推荐 使用 adobe illustrator  设计图标并提供了ai模板)

6·点击更多操作对该项目进行一些设置如下图:


输入图标前缀为了不和element ui 的图标冲突 所以在 原有的el-icon后面加上自己的项目名称。然后设置 font family 点击保存

7·点击下载到本地 会下载一个download.zip 解压后 打开文件夹大致如下图:


其中有一些demo 和 样例 不用导入项目,但是为了给其他人一个提示也最好直接把所有文件拷贝到自己的vue项目中的:

src/assets 下 新建一个 icon文件夹。效果如图


然后打开iconfont.css

添加 代码

[class^="el-icon-ump"], [class*=" el-icon-ump"] {
  font-family:"fontFamily" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 18px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

其中2个class 处 和 font-family 的设置是来自在 阿里矢量库项目设置的参数 请填写一致(注意:第二个class处前面有个空格)

修改完该文件 效果如下图:



8·然后在项目中要使用图标的页面 引入上面修改的css。

9·在项目中使用图标有两种方式 如 我的图标全称为el-icon-ump-addition

1)icon属性

<el-button size="small" icon="ump-addition" @click="handleAdd" style="padding:6px 4px;width: 90px">
    新增群组
</el-button>

2)class属性

<el-button size="small" class="el-icon-ump-addition" @click="handleAdd" style="padding:6px 4px;width: 90px">
    新增群组
</el-button>
10·完结



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/b376924098/article/details/78286880

Vue中使用ElementUI使用第三方图标库iconfont

1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中,然后点击更多项目中的编辑项目 2.修改前缀为el-icon-xxx,xxx自定义然后,将项目下载自本地 ...
  • qq_15646957
  • qq_15646957
  • 2017-09-07 21:35:26
  • 14981

ElementUI使用第三方图标库Iconfont

1、http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.2  进入阿里巴巴图标库 2、将所需图标加入购物...
  • sou_vyp
  • sou_vyp
  • 2017-10-10 09:20:50
  • 5537

【工作日志】elementUI学习-Layout布局

Layout布局1.创建布局通过Col组件的:span属性调整Layout布局,分为24栏。el-row> 2.分栏间隔通过Row组件的:gutter属性来调整布局之间的宽度。 ...
  • FelixJiaWork
  • FelixJiaWork
  • 2017-03-13 16:24:53
  • 17838

Element-Ui组件(四)Icon 图标

Element-Ui组件(四)Icon 图标 本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/component/icon 基础...
  • sps900608
  • sps900608
  • 2018-03-05 11:00:46
  • 272

elementui2.0图标错乱的问题

element-ui升级到2.0之后,发现我的代码中图标是乱的,比如 刷新 出来的效果却不是刷新图标。具体原因没有深入排查,只是找到了解决方法,在webpack打包时,用url-loader替换f...
  • wsxwang
  • wsxwang
  • 2017-11-02 11:34:22
  • 947

vue 学习第二节

整体页面框架搭建因为本人前端基础差,特别是css方面所以一般我都是用静态的方式先弄一个架子出来在一步一步替换死的变成活的先看看静态的页面接下来死的先把这个界面迁移到vue项目中 写一个顶部导航组件 写...
  • oopsangle
  • oopsangle
  • 2017-01-28 18:49:16
  • 1962

amazeUI的icon图标库

保存 红框中的图片,就是amazeUI图标库中的图标。 Amaze UI Icon 组件目前使用了 Font Awesome(Amaze UI 2.2.0 中升级至 4.3.0)。...
  • Ideality_hunter
  • Ideality_hunter
  • 2017-04-14 11:12:50
  • 4418

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

我们使用element-ui、vue开发网站的时候,往往图标是起着很重要的作用。下面是vue、element-ui项目,如何使用阿里iconfont图标库的方法。    准备工作        1. ...
  • qq_32113629
  • qq_32113629
  • 2018-03-29 13:45:42
  • 931

vue项目中引入iconfont

iconfont方便又好用,介绍一下如何在vue项目中引入iconfont 1 进入iconfont官网,将需要的图标加入库,点击下载代码         ...
  • denl0918
  • denl0918
  • 2018-01-05 11:30:49
  • 2025

vuejs搭建的项目如何引入图标字体

引入阿里的icon库; 1.所选择的字体图标下载代码包, 2.代码包里除掉demo文件,其他拷贝到vue项目里,自建一个icon文件目录 3.所引用的组件页面导入iconfont.css文件 @...
  • milli236
  • milli236
  • 2017-09-06 21:15:09
  • 6107
收藏助手
不良信息举报
您举报文章:【Vue】 element ui 引入第三方图标
举报原因:
原因补充:

(最多只允许输入30个字)