ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue element-ui配置第三方图标库

2020-08-14 07:34:40  阅读:512  来源: 互联网

标签:vue 图标库 iconfront element import font com icon


配置第三方图标库的相关(博客)教程:

https://www.cnblogs.com/linyihai/p/10575668.html

https://www.cnblogs.com/ceceliahappycoding/p/10821966.html

制作svg图标字体可以参考下面这些连接的内容:

https://www.zhihu.com/question/29054543

https://jingyan.baidu.com/article/066074d69e8d7182c31cb012.html

https://www.jianshu.com/p/7423b1db96a4

https://www.cnblogs.com/linyihai/p/10575668.html

(下面内容【链接一】来源:lyh225

elementui框架自带icon在开发大型前端应用时显得捉襟见肘。淘宝开源的iconfront的图标库上有很多优秀的icon图标。elementui支持整合iconfront到应用中,步骤如下:

  1. 首先需要在iconfront注册登陆,新建项目,然后把心仪的icon添加到项目中。

    )
  2. 接下来有两种做法,一种是在线链接,一种是下载解压后拷贝到本地的项目。
  • 在线链接方式如下
    新建一个iconfont.css文件,添加如下内容,el-icon-ali是第一步新建项目时给定的icon名前缀。
[class^="el-icon-ali"], [class*="el-icon-ali"]
{
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

接下来将iconfront项目提供的在线链接添加到vue项目的index.html中

<!DOCTYPE html>
<html>
<head>
    ...
    <link>
</html rel="stylesheet" href="//at.alicdn.com/t/font_1100946_7gqmadkiso5.css
">

在vue项目中的main.js中import刚才创建的iconfront.css

import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/.../../iconfront.css'
Vue.use(ElementUI)

添加新icon时,只要更新index.html中的链接即可

  • 下载导入方式
    解压下载出所有文件,拷贝到vue适当目录中,找到iconfront.css文件,一样添加如下内容
[class^="el-icon-ali"], [class*="el-icon-ali"]
{
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

接下来只要在vue项目中的main.js中import刚才创建的iconfront.css即可

import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/.../../iconfront.css'
Vue.use(ElementUI)

标签:vue,图标库,iconfront,element,import,font,com,icon
来源: https://www.cnblogs.com/ZheOneAndOnly/p/13499076.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有