vue element-ui配置第三方图标库
作者:互联网
配置第三方图标库的相关(博客)教程:
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到应用中,步骤如下:
- 首先需要在iconfront注册登陆,新建项目,然后把心仪的icon添加到项目中。
) - 接下来有两种做法,一种是在线链接,一种是下载解压后拷贝到本地的项目。
- 在线链接方式如下
新建一个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