1:页面中引入iconfont图标字体
首先需要我们去阿里图标网站选择我们所需要的字体图标,下载到我们本地,然后添加到我们的页面上,添加到页面上的具体路径如下:
icon图标在页面上的路径.png
2:我们将图标放到我们的项目中之后,现在我们来在页面上引入我们的字体图标,我们知道main.js是我们项目的入口文件,所以我们在main.js中引入我们的css样式
main.js中引入图标字体样式.png
这里需要注意的是,由于我们修改了图标字体的存放的路径,所以我们需要在iconfont.css中修改图标字体的src路径
修改图标字体的引入的路径.png
好了,以上我们就正确引入了字体图标,可以在页面上使用了.
3:下面是关于我们代码的优化:
4:优化css
main.js中引入图标字体样式.png
关于定义css变量,以及文件的引入.png
5:我们知道@表示的是src,其实在文件中我们就可以这样写@/assets/styles
那么我们页面上好多地方都有用的styles,我们如果都这样写太长了,所以我们可以在build文件夹下的webpack.base.sonf.js文件下配置像@符合代表src一样的变量,具体如下图
定义类似@符号的变量.png
引入.png
需要注意的是,文件配置完成后需要重启我们的项目哦.
网友评论