琢磨很久,都不知道哪里有问题,然后重新写和粘贴代码走了一遍
把iconfont图标,放进自己新建的iconfont.css里面
iconfont.css内容
@font-face {
font-family: "iconfont";
src: url('//at.alicdn.com/t/font_2429860_od9norre75.eot');
src: url('//at.alicdn.com/t/font_2429860_od9norre75.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2429860_od9norre75.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2429860_od9norre75.woff') format('woff'),
url('//at.alicdn.com/t/font_2429860_od9norre75.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2429860_od9norre75.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
图标获取的阿里云url(减少本地文件夹存储)
在main.js 全局引用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './style/iconfont.css'
createApp(App).use(store).use(router).mount('#app')
class名 一定要写对 iconfont ,
是图标代码
<div class="docker_item">
<div class="iconfont"></div>
首页
</div>
</div>
最终效果: