1.登录iconfont网站,选择我们需要的图标加入购物车,添加到项目,进行下载。
2.下载好的压缩包解压缩,里面有很多文件,
demo.css .html 文件等都不要了
新建一个文件夹iconfont放在asset/style文件夹下,
把iconfont.eot iconfont.js iconfont.svg iconfont.ttf iconfont.woff 放入新建的iconfont文件夹中。
把iconfont.css文件放入style文件夹目录下。
3.在main.js中引入
import 'styles/iconfont.css'
注意路径,我这里的路径是在webpack.base.config.js的resolve中对路径进行简写设置。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles')
}
}
4.在iconfont.css中修改文件的路径,如果是我上面写的文件夹层次的话,需要在iconfont的前面加上./iconfont/.
5.在模板中使用,格式如下:
<span class="iconfont down_arrow_icon"></span>
参考:https://blog.csdn.net/qq_34802010/article/details/81451278 感谢原作者整理分享。