在项目中引入图标库有很多种方法，网上可供选择的图标库有很多。比如: 收费的Glyphicons、使用传统模式引入的Iconic、支持API的Octicons以及有海量资源有可定制的iconfont。本节以Iconic为例进行展示。 之所以说Iconic是传统的模式是由于其直接提供了CSS文件及字体文件，在使用它的过程中仅需将其引入到项目中即可。 ## 下载 Iconic的官方地址为:[https://useiconic.com/open/](https://useiconic.com/open/)，打开官网后找点吉Download按钮。  >[warning] 此节书写于2020年2月，你在学习本教程中可以以上的下载地址已失效或官方推出了更新版本。你可以点击[https://mengyunzhi.github.io/spring-boot-and-angular-guild/attachements/open-iconic-master.zip](https://mengyunzhi.github.io/spring-boot-and-angular-guild/attachements/open-iconic-master.zip)下载与教程相同的版本。 下载完成后进行解压，然后找到font文件夹。  ## 引入 建立src/styles文件夹，然后按以下步骤分别引用css文件及字体文件。 一、将font下的css/open-iconic-bootstrap.mi.css文件  复制到项目中的src/styles/css文件夹中  二、将font下的fonts文件夹  整体复制到项目中的src/styles文件夹中  最后src/styles中内容如下：  >[success] 图标其是一种"字体"，该字体由css样式表文件及字体文件组件。 ## 配置 打开`src/styles.sass`将前面加入引入项目的css引入，以使得该css文件生效。 ```sass /* You can add global styles to this file, and also import other style files */ @import url('styles/css/open-iconic-bootstrap.min.css') ``` ## 测试 配置完成后小试牛刀，尝试为学生列表组件中的 新增 编辑 删除 按钮加入图标。来到图标的官方[https://useiconic.com/open/](https://useiconic.com/open/)，分别找三个适用的图标：    使用`ng test`启动单元测试，并找到学生列表组件对应的单元测试文件，将任意的测试用例由`it`修改为`fit`。 ### 新增图标 找到新增图标，点击一下然后复制相关的代码:  粘贴到对应的位置上： src/app/student/index/index.component.html ```html <a class="btn btn-primary" routerLink="./add"><span class="oi oi-plus"></span>新增学生</a> ``` 效果：  ### 编辑删除图标 使用同样的方法添加编辑删除图标： src/app/student/index/index.component.html ```html <td> <a routerLink="./edit/{{student.id}}" class="btn btn-sm btn-info"><span class="oi oi-pencil"></span>编辑</a> <button (click)="onDelete(student)" class="btn btn-sm btn-danger"><span class="oi oi-trash"></span>删除</button> </td> ``` 效果如下：  ## 完善细节 最后在公共样式styles.sass中完善一些小细节，让按钮与按钮、按钮图标与文字结合的更顺眼一些。 src/styles.sass ``` /* You can add global styles to this file, and also import other style files */ @import url('styles/css/open-iconic-bootstrap.min.css') .btn>span.oi margin-right: 0.5em ➊ table>tr>td>.btn margin-left: 0.8em ➋ ``` * ➊ 增大图标与文字间的距离 * ➋ 增大表格中按钮与按钮的距离  在这使用的单位为`em`，相较于习惯使用的`px`。`em`根据根据上下文（font-size的值）来自动的调整大小。比如在➊中设置了图标与文字的间距，同作用于`新增`及`编辑`上的实际效果为：  # em VS px px为相对于显示器（标清）象素的绝对值。比如显示器分辨率为1920*1080，表示该显示第一行由1920个的像素点组成，该显示器共有1080行。此时如果设置`margin-right: 7px` 则表示该元素应距离右边的元素7个像素这么大（有放大镜的同学可以照一下数一数）。 em为相对于上下文的`font-size`。如果设置`margin-right: 0.5em`，则会先找自己的宿主元素是否设置了`font-size`，如果没有设置则向上找宿主的宿主，一直找到html标签为止。如果html标签也没有设置，则会使用浏览器的默认设置。找到以后以此值（比如14px）为标准值1em。则0.5em为标准值的0.5倍，在标准值为14px的情况下，该值即为7px。 按此理论分别查看编辑按钮及新增按钮： 编辑  新增  # 集成测试最终效果  # 参考文档 | 名称 | 链接 | 预计学习时长(分） | | --- | --- | --- | | 源码地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.8.6](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.8.6) | - | | sass @import | [https://www.sass.hk/docs/](https://www.sass.hk/docs/) 需要手动搜索关键字 | 5 | | sass @import | [https://sass-lang.com/documentation/at-rules/import#plain-css-imports](https://sass-lang.com/documentation/at-rules/import#plain-css-imports) | 5 |