第2期 如何生成和使用iconfont

除了图片，我们还经常使用字体icon来展示图片。其实原理就是我们将svg文件生成一个矢量图标库或者直接网上下载一个矢量图标库，然后我们设置@font-face来引入字体文件并命名，之后在css中设置font-family为我们的矢量图标库的名字来引用该字体。

下载一个矢量图标库

有一些现成的矢量图标库可以使用，直接下载想要的矢量图标库，得到类似下面的几个文件，这几个文件实际意义都一样，只是不同的浏览器兼容的格式不同，一般是这几个格式就足够了。

生成一个矢量图标库

我们也可以自己生成这几个文件，新建一个svg的文件夹，然后用webpack-iconfont-plugin-nodejs这个插件将svg的文件生成这几个文件。 以下路径的配置可以看官方文档。

const WebpackIconfontPluginNodejs = require("webpack-iconfont-plugin-nodejs");
const path = require("path");

new WebpackIconfontPluginNodejs({
  fontName: "icomoon",
  svgs: path.join(__dirname, "../src/global/fonts/svg/*.svg"),
  fontsOutput: path.join(__dirname, "../src/global/fonts/font-family"),
  cssOutput: path.join(__dirname, "../src/global/scss/font.scss"),
  formats: ["ttf", "eot", "woff", "svg"],
  htmlOutput: false,
  cssPrefix: "icon",
  cssFontPath: '~global/fonts/font-family',
})
  .build()
  .then();

该文件还会自动帮我们生成一个样式文件，这里我设置生成font.scss的样式文件的路径为src/global/scss/font.scss。

设置font-face 引入字体文件并设置获取font-family的值为iconmoon

font-face来定义字体文件的来源 名称

@font-face {
    font-family: icomoon;
    src: url("~global/fonts/font-family/icomoon.eot");src: url("~global/fonts/font-family/icomoon.eot?b0958f62#iefix") format("embedded-opentype"),
             url("~global/fonts/font-family/icomoon.woff?b0958f62") format("woff"),
             url("~global/fonts/font-family/icomoon.ttf?b0958f62") format("truetype"),
             url("~global/fonts/font-family/icomoon.svg?b0958f62#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}

css中设置font-family为icomoon

[class^="icon"], [class*=" icon"] {
    font-family: 'icomoon' !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
}

通过设置icon-xxx为类名就可以展示啦~

<div class="icon-Business"></div>