AngularCli项目中添加字体图标(Font)详解

时间:2022-10-28 05:33:01

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

一 SVG图标准备

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

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

二 SVG图标转Font

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

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

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

AngularCli项目中添加字体图标(Font)详解

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

AngularCli项目中添加字体图标(Font)详解

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

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

AngularCli项目中添加字体图标(Font)详解

点击图标,对于其进行属性设置:

AngularCli项目中添加字体图标(Font)详解

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

AngularCli项目中添加字体图标(Font)详解

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

AngularCli项目中添加字体图标(Font)详解

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

AngularCli项目中添加字体图标(Font)详解

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

三 将Font文件引入AngularCli项目

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

AngularCli项目中添加字体图标(Font)详解

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

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

AngularCli项目中添加字体图标(Font)详解

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

AngularCli项目中添加字体图标(Font)详解

3)在AngularCli项目中src目录下的styles.less中,引入font.less:

AngularCli项目中添加字体图标(Font)详解

四 引用和使用字体图标

在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>

显示效果:

AngularCli项目中添加字体图标(Font)详解

五 后续更新字体图标

 新增图标步骤:

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

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

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

参考资料&内容来源

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