vue怎么把字体改大（你不知道的VUE3字体图标的使用）

我是熊妈妈，一个专注前后端开发和个人提升的90后，点击右上方【关注】，教你如何提升自己的前后端编程能力。

随着vue升级到3，我们常用的element ui也升级到了 element plus啦！这对黄金搭档开启了新的搭配了。[得意]

既然这对黄金搭档都升级了，那肯定在使用的时候有些不同啦！今天我们就来讲讲字体图片的使用。

字体图标分成两种，一种是element plus自带的，另外一种就是我们自定义的。今天我们就通过这两个方面来说说图片的新使用方法！

当我们拿到ui稿时，就看到了很多ui的图标。我们可以更具需求来区分这些图标，是要做成字体图标还是用图标。

小的icons最好还是做成图标，方便多次使用、更便于修改大小和样式！

当让有些特需的也是可以做成字体图标的。～～

yarn add @element-plus/icons-vue --save

安装还是很简单的，只需要使用次命令就可以了。

安装完成之后，我们就开始使用吧。

在开始使用之前，我们需要把自定义的图标上传到iconfont（不一定非要这个平台，也可以其他的），拿到图标字体的地址路径！

今天我们主要演示iconfont的使用。

1、在iconfont下新建项目，其中Symbol，FontFamily设置需要注意

在图标的名称格式:el-icon-图标名称！

这样做是方便element图标样式的调整

2、把项目的图标下载到本地，拷贝需要的文件到自己项目的src/assets/iconfont(没有iconfont文件夹可以自己新建)

在main.js中引入

import './assets/iconfont/iconfont.css'

在html中使用

<i class="el-icon-home">

在css调整

打开iconfont/iconfont.css

这样自定义的图标使用就完成了！✅

学习其他文章:

作者介绍:【熊妈妈】

一个专注前后端开发和个人提升的90后，希望通过学习提升自己的前后端编程能力。

加油～～