IcoMoon制作图标字体

前端开发中图标的引入通常使用图标字体来解决，比如FontAwesome就提供了封装好的图标字体文件。但这种方式有一个缺点，图标字体文件可能非常巨大，将字体文件整体引入会严重拖慢我们网页的加载速度。一个比较好的解决方案是自己按需制作图标字体文件，IcoMoon是一个能制作图标字体文件的在线工具。

icomoon.io

准备SVG图标资源

FontAwesome提供了大量的图标资源，我们直接根据我们的需要下载SVG格式的图标。

使用IcoMoon制作图标字体

在IcoMoon网站中点击IcoMoon App，在这里我们可以导入SVG格式的图标资源。IcoMoon也提供了一些自带的图标资源供我们使用。

选择我们需要的图标，然后点击Download按钮就行了。

下载的压缩包里有字体的.woff文件和对应的CSS。

引入IcoMoon字体文件

我们将字体的.woff文件放到工程中，然后将对应CSS引入或黏贴到全局CSS样式文件中即可，下面是一个例子。

@font-face {
  font-family: "icomoon";
  src: url("/fonts/icomoon.woff?m2grhf") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-files-empty:before {
  content: "\e925";
}
.icon-bin:before {
  content: "\e9ac";
}
.icon-download3:before {
  content: "\e9c7";
}
.icon-eye:before {
  content: "\e9ce";
}
.icon-plus:before {
  content: "\ea0a";
}

CSS中@font-face定义了字体文件，后面的.icon-开头的类对应于字体文件中的Unicode码值，这样我们直接指定CSS类名就可以引用自定义的字体图标了。

<span class="icon-download3"></span>