先到 https://www.iconfont.cn/ 添加项目,加入想要的图标
下载图标
在项目下添加common公共文件
把解压的iconfont.css 文件放在common目录下
在common目录下创建font文件,把加压的除了iconfont.css 文件放进去(不要放文件夹)
在APP.vue 中引入iconfont.css(这样就不用在页面中单独引入了)
<style> import "~@/common/iconfont.css"; </style>
期间注意iconfont.css 文件,在路径前面都加上 ~@/common/font/ 处理后效果如下
@font-face {font-family: "iconfont";
src: url('~@/common/font/iconfont.eot?t=1595143705861'); /* IE9 */
src: url('~@/common/font/iconfont.eot?t=1595143705861#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,base64编码文件') format('woff2'),
url('~@/common/font/iconfont.woff?t=1595143705861') format('woff'),
url('~@/common/font/iconfont.ttf?t=1595143705861') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('~@/common/font/iconfont.svg?t=1595143705861#iconfont') format('svg'); /* iOS 4.1- */
}
