iconfont图标文件夹的安置与引用
在使用阿里巴巴的iconfont时,经常会遇到需要将iconfont文件夹放置于特定位置的问题,以及在不同位置引用iconfont.css文件的疑惑。
iconfont文件夹放置位置
iconfont文件夹可以放在assets或static文件夹下。这两个文件夹都是用于放置静态资源的,在安装项目时会被引用。
引用iconfont.css
立即学习“前端免费学习笔记(深入)”;
iconfont.css文件既可以在index.html中引用,也可以在main.js中引用。
- 在index.html中引用:可以全局加载图标资源,在所有页面生效。
- 在main.js中引用:仅在当前页面生效,代码组织更清晰,组件可移植性更高。
目前大多数项目中,都倾向于在main.js中引用iconfont.css,原因如下:
- Vue项目中,页面通常在组件中完成,而不在index.html中。
- 在组件内引用公共资源更简洁,可移植性更高。