很多时候自带的图标不能满足我们的需求,需要UI设计。这时候我们就需要用到iconfont了。
ICONFONT有三种使用方式。
首先把文件放在项目内,方便引入。
第一种unicode
第一步:拷贝项目下面生成 @font-face
@font-face {
font-family: 'iconfont';
src:
url('iconfont.woff2?t=1660908505121') format('woff2'),
url('iconfont.woff?t=1660908505121') format('woff'),
url('iconfont.ttf?t=1660908505121') format('truetype');
}
第二步:定义iconfont的样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont">3</span>
第二种:Font Class
第一步:在main.js里面引入
import '../static/ifont/iconfont.css'
第二步:挑选相应图标并获取类名,应用于页面
<i class="iconfont icon-zuzhi_img"></i>
第三种:Symbol
第一步:在main.js里面引入
import '../static/ifont/iconfont.js'
第二步:加入通用 CSS 代码(引入一次就行)
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
第三步:挑选相应图标并获取类名,应用于页面
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>