在实际的开发中,经常需要用到一些icon图标,一些ui框架有提供icon图标,但是数量总有穷尽的时候,而且有些图标并不能满足你的要求,此时就需要用到iconfont这个网站了,里面提供了很大icon图标还有很多使用方式 图片、svg、Font class、Unicode、Symbol。
在vue3中应用iconfont图标
先打开 iconfont-阿里巴巴矢量图标库 注册
选中自己喜欢的icon加入购物车
点击购物车加入到你的项目当中
项目设置(选做)
这一步只是跟后面引用的样式类名相关,如果你想你的css样式名是定制的你可以执行这一步,反正无所谓的你就不用去理。
FontClass/Symbol 前缀 就是样式名的前缀 Font Family就是样式名
列如下图最终的样式是:
<div class="icons bs- +"图标名"/>
<i class="icons bs-quanping"></i>
下载图标
将下载好的文件导入vue项目
下载好的文件里面,复制这四个文件到你的vue项目里面去。
我在放进去了这个目录里面 src\assets\css\iconfonts ,你们自己看情况。
在main.js导入下载好的iconfont.css
一定要注意,你否导入的路径是否正确。,不想在main.js导入的话,在vue的单文件里面 @import 导入应该也是可以的,我没有去尝试,但是我想应该是一样的。
介绍一下iconfont.css
下面两个样式
.icons样式规定了你的图标的一些表现形式,.bs-quanping:before就是一些具体的内容了,"\ec13"这个字符会被渲染为我们刚刚定义的字体中的一个图标。
你想改变图标的颜色大小也是在.bs-quanping:before 里面去改。
.bs-quanping:before {
content: "\ec13";
color: red;
font-size: 24px;
}
在vue中去引用以及导入的icon
在vue中用 <i/> 标签设置class就能正确显示了。
里面的class是有讲究的,写不正确的话就只会显示成一个方框,或者不显示,反正不会成一个icon 。我为此吃了不小的亏,花了好多时间去找答案。
示范如下:一起要写两个样式 ,就是iconfont.css文件里面规定好的那两个样式。注意中间要有空格他们是两个样式,没有空格就是一个样式了
<i class="icons bs-quanping" style="font-size: 26px;"></i>
成果:
哈哈哈,其实是这个
至于另外两个方式怎么用,其实也是大差不差官方教程在下去看看就行。
- Font class
- Symbol
使用iconfont出现方框怎么解决
出现方框我遇到的问题就是class写错了,正确的是将iconfont.css文件里面的两个样式都写进去,缺一个也不行。还有一些路径引用问题也会导致方框的出现,请确保你的main.js是否正确的引用到了iconfont.css。
<i class="icons bs-quanping" style="font-size: 26px;"></i>