Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可
下载图标
先进入iconfont.cn页面
iconfont官网:https://www.iconfont.cn/
方法见上
使用一
准备工作
1、先注册,再登录、找到图标管理、我的项目
2、点紫色的这个创建自己的项目
新建项目界面如下
3、图中画蓝线的地方很重要
1)、FontClass/Symbol前缀
这个很重要,一定不要写成:el-icon-***
这样的形式。
如果你写成这样的前缀,会和element-ui框架所带的图标(icon)冲突,导致你图标显示不出来
2)、FontFamily随便起一个名字,你能记住就行
4、项目创建完了,你可以往项目里面添加自己想要的图标了
实例-想要一个法律的图标
1、搜索之后能找出来好多不一样的法律图标,找到你想要的图标,点击添加入库,当你点击完之后,购物车会出现你刚才添加入库的数量;
点添加至项目,这时候回弹出来你刚才创建好的项目,选中你刚创建好的项目,在点击下面的确定
2、图标添加完毕!找到我的项目->你刚才创建的那个项目->点击下载到本地
3、你会得到一个压缩包,打开这个压缩包,里面有一些文件是没用的。画红线的留着,其他没画的可以删除
搭建项目
1、在vue-cli、element-ui项目中,src文件夹->assets->文件夹下面创建名字为icon的文件夹,将上面第3步中画红线的文件拷贝到icon文件夹中。
2、找到项目中的main.js文件,导入iconfont.css样式
3、打开iconfont.css文件你会看到:
上面的是,你创建项目时候定义的字体,下面的是你一会要引入的样式类名(就是你想要的图标)
4、ok我们这回终于可以引用图标了
<div class="top-b">
<span class="iconfont iconfalv"></span> //记住别写错!!
</div>
在这里可以根据这个类名改变这个图标的字体大小、颜色…
.iconfalv {
font-size: 50px;
color: blue;
}
我习惯用引入类名方式,当然还有icon=“iconfont iconfalv” 这种方式
5、效果展示
总结
引入的图标是不是比你平时引入的img高大尚很多,它还可以支持css的语法,文件体积还小,还可以让其不和element-ui图标冲突
使用二
1、在同上,下载完图标后,找到项目中的main.js文件,导入iconfont.js文件
2、打开iconfont.css文件你会看到:
3、在单页面中使用svg方式引用图标了
<div class="top-b">
<svg class="icon" aria-hidden="true">
<use xlink:href="#iconfalv" /> //与iconfont.js中的id命名一致
</svg>
<span class="iconfont iconfalv1"></span>
</div>
在这里可以根据这个类名改变这个图标的字体大小、颜色…
.icon {
width: 60px;
height: 60px;
color:red;
// width: 1em;
// height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
4、显示效果
注意:
svg图标样式,不支持直接修改图标颜色
svg图标颜色的解决方案
1、用编辑器打开iconfont.js文件,搜索fill="#202A35"
中的fill="#
,删除fill="#xxx"
后即可通过css进行修改。
2、修改svg图标样式
.icon {
width: 60px;
height: 60px;
color:red;
// width: 1em;
// height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
3、显示效果
注意
在iconfont.cn官网上,选中项目中的文件,应用批量操作 -> 批量去色
。
使用三:html页面中使用svg图标
1、用编辑器打开iconfont.js文件,搜索fill="#202A35"
中的fill="#
,删除fill="#xxx"
后即可通过css进行修改。
2、html实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 不能忘记引入css样式文件 -->
<link rel="stylesheet" href="./iconfont.css" />
<script src="../css/iconfont.js" type="text/javascript"></script>
</head>
<style>
.icon {
width: 160px;
height: 160px;
color: red;
/* // width: 1em;
// height: 1em; */
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<body>
<span> iconfont图标的使用:</span>
<svg class="icon" style="font-size: 100px; color: pink" aria-hidden="true">
<use xlink:href="#iconfalv" />
</svg>
<i style="font-size: 100px; color: blue" class="iconfont"></i>
</body>
</html>
html页面-效果: