使用iconfont

plaintext

static/
└── iconfont/
    ├── iconfont.css     # 图标样式
    ├── iconfont.ttf     # 字体文件
    ├── iconfont.woff    # 优化版字体文件
    └── iconfont.svg     # SVG格式图标

static/
└── iconfont/
    ├── iconfont.css     # 图标样式
    ├── iconfont.ttf     # 字体文件
    ├── iconfont.woff    # 优化版字体文件
    └── iconfont.svg     # SVG格式图标

优化 iconfont.css（添加多格式支持）

css

@font-face {
  font-family: 'iconfont';
  src: url('/static/iconfont/iconfont.woff2?t=1677552875356') format('woff2'),
       url('/static/iconfont/iconfont.woff?t=1677552875356') format('woff'),
       url('/static/iconfont/iconfont.ttf?t=1677552875356') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'iconfont';
  src: url('/static/iconfont/iconfont.woff2?t=1677552875356') format('woff2'),
       url('/static/iconfont/iconfont.woff?t=1677552875356') format('woff'),
       url('/static/iconfont/iconfont.ttf?t=1677552875356') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

css

// App.vue
<style lang="scss">
  @import '@/static/iconfont/iconfont.css';
</style>

// App.vue
<style lang="scss">
  @import '@/static/iconfont/iconfont.css';
</style>

使用

vue

<text class="iconfont icon-user"></text>

<text class="iconfont icon-user"></text>

使用iconfont ​

使用iconfont