在項目中引入圖標庫有很多種方法，網上可供選擇的圖標庫有很多。比如: 收費的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 |