在vue3中应用iconfont图标，使用iconfont出现方框怎么解决

         在实际的开发中，经常需要用到一些icon图标，一些ui框架有提供icon图标，但是数量总有穷尽的时候，而且有些图标并不能满足你的要求，此时就需要用到iconfont这个网站了，里面提供了很大icon图标还有很多使用方式 图片、svg、Font class、Unicode、Symbol。

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/下面就交大家怎么用

在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-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code

使用iconfont出现方框怎么解决

 出现方框我遇到的问题就是class写错了，正确的是将iconfont.css文件里面的两个样式都写进去，缺一个也不行。还有一些路径引用问题也会导致方框的出现，请确保你的main.js是否正确的引用到了iconfont.css。

<i class="icons bs-quanping" style="font-size: 26px;"></i>