AngularCli项目中添加字体图标（Font）详解

本文主要讲如何在AngularCli生成的项目中使用字体图标。

一 SVG图标准备

将需要转换为字体图标的图片转换为SVG格式。

这个让项目视觉设计师搞定即可。

二 SVG图标转Font

可以通过IconMoon网站提供的在线app实现SVG图标转Font字体文件。详细步骤如下：

步骤1：打开浏览器输入IconMoon官网，进入网站后，点击右上角紫色IcoMoonApp

说明：网站地址： https://icomoon.io/
注意：及时清除默认库图标，否则会对导入字体图标引入干扰

步骤2：点击左上角紫色图标ImportantIcons,导入所有的SVG图片文件。

Yes（代表要按原来图标顺序排序）；No（代表要重新按照库已有排序），主要区别在于当前库是否有图标，否则会影响顺序。如若没有图标（之前图标清零），无影响。导入新增图标（XXX.svg）文件，步骤如上。

步骤3：点击右下角Generate Font进入图标详细编辑页面。

点击图标，对于其进行属性设置：

设置tags和names，尽量为英文简写，设置好，后关闭页面，检查顺序是否有序，尽量别空位，保证以后可以和入更多图标。

步骤4：设置字体文件名字和class前缀，点击右下角Download旁边配置齿轮图标：

在打开的配置界面，完成Fony Name和Class Prefix配置，如下图：

步骤5：点击右下角Font download，完成字体图标文件下载。

三 将Font文件引入AngularCli项目

上边步骤中下载下来的Font压缩文件目录如下：

我们要用到的主要是fonts文件夹下文件和style.css，按下边步骤完成将这些文件合入AngularCli项目。

1）首先将fonts文件夹直接拷贝到AngularCli项目的assets目录下：

2）在AngularCli项目的src目录下，新建font.less文件，将style.css中内容拷贝到font.less中，并修改最上边@font-face中引用字体图标文件的路径：

3）在AngularCli项目中src目录下的styles.less中，引入font.less：

四 引用和使用字体图标

在font.less中有对应图标的class，可以在DOM中直接添加这些class就可以显示对应的图标。

示例：

如下是font.less中的图标样式类：

   .dp-fontDLI:before {
     content: "\e903";
     color: #ffa55f;
   }
   .dp-fontDWS:before {
     content: "\e904";
     color: #54aefb;
   }

在HTML中使用：

   <div class="dp-fontDWS"></div>
   <div class="dp-fontDLI"></div>

显示效果：

五 后续更新字体图标

 新增图标步骤：

1）将之前的字体图标文件中的.svg文件导入到IconMoon 网站中；

2）将新增图标的SVG文件导入到IconMoon网站中；

3）选择之前的图标和新增图标，生成和下载Icon（详细步骤略过，请查看上边详细说明）。

参考资料&内容来源

IconMoon官网：https://icomoon.io/