字体文件的处理 iconfont 的处理

iconfont的使用

1. 选择自己喜欢的字体图标添加到购物车

2. 添加到项目

3. 在项目中点击下载到本地

字体文件的加载

1. 完成iconfont字体文件的下载

2. font class的方式（只支持单色模式）

• 入口文件中引入iconfont.css文件

• 复制要是用的icon 的类名，比如： icon-zhinan

• 在html模板中使用

• // iconfont 是必须的， 后面的是需要使用的图标的类名
  <span class="iconfont icon-tongzhi"> content span>
  1
  2

• 针对字体文件配置webpack.config.js

• {
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    type: 'asset/resource', 
    generator: {
      filename: 'static/fonts/[hash:8][ext]'
    }
  },
  1
  2
  3
  4
  5
  6
  7

• ​

3. symbol 使用方式（可以使用多色模式）

• 入口文件引入iconfont.js

• 加入通用的css代码

• <style>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  style>
  1
  2
  3
  4
  5
  6
  7
  8
  9

• 使用svg引入需要使用的图标

• <span>
    <svg class="icon" aria-hidden="true">
    	// href引用的就是需要导入的iconfont图表的名字  
      <use xlink:href="#icon-tongguo">use>
    svg>
  span>
  1
  2
  3
  4
  5
  6

• ​