# fontawesome 本節我們引用fontawesome圖標庫、自定義css文件對教師列表組件進行進一步的美化。 ## 美化按鈕 進一步的為調整按鈕位置、顏色、樣式來貼近于生產環境： ```html +++ b/first-app/src/app/app.component.html @@ -1,6 +1,11 @@ <router-outlet></router-outlet> -<a routerLink="add">新增</a> -<table class="table table-striped"> +<div class="row"> + <div class="col-12 text-right"> + <a class="btn btn-primary mr-2" routerLink="add">新增</a> + </div> +</div> + +<table class="table table-striped mt-2"> <thead> <tr class="table-primary"> <th>序號</th> @@ -18,7 +23,10 @@ <td>{{ teacher.username }}</td> <td>{{ teacher.email }}</td> <td *ngIf="teacher.sex; else femaleBlock">男</td> - <td><span (click)="onDelete(teacher.id)">刪除</span> <a [routerLink]="'edit/' + teacher.id">編輯</a></td> + <td> + <a class="btn btn-outline-primary btn-sm" [routerLink]="'edit/' + teacher.id">編輯</a> + <span class="btn btn-sm btn-outline-danger" (click)="onDelete(teacher.id)">刪除</span> + </td> </tr> </tbody> </table> ```  ## 引入字體圖標 越來越多的項目使用字體圖標來替換傳統的圖片圖標。字體圖標具有字體的一切屬性，有體積小、不失真、使用靈活方便等優點。在此，我們引入免費的`fontawesome`字體圖標。 ### 安裝依賴 進入項目根目錄并執行`npm install --save @fortawesome/fontawesome-free`: ```bash panjie@panjies-Mac-Pro first-app % npm install --save @fortawesome/fontawesome-free > @fortawesome/fontawesome-free@5.15.2 postinstall /Users/panjie/github/mengyunzhi/angular11-guild/first-app/node_modules/@fortawesome/fontawesome-free > node attribution.js Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + @fortawesome/fontawesome-free@5.15.2 added 1 package from 6 contributors, removed 1 package and audited 1468 packages in 13.405s 84 packages are looking for funding run `npm fund` for details found 0 vulnerabilities ``` 安裝完成后，我們將在項目項目的`node_modules`文件夾下查看到`@fortawesome`文件夾。接下來，我們參考官方文檔來分別為開發、測試環境添加圖標庫。  官方文檔說：我們僅僅需要引入`/css/all.css`以及至項目中`/js/all.js`即可。那么，開始嘗試吧。 > 我們應該去哪找`/css/all.css`文件呢？猜猜看。 ### 開發環境 對項目開發環境`ng s`的配置位為`angular.json`文件配置的`projects -> firest-app -> architect -> build -> options上。`options`上一個`styles`屬性，一個`scripts`屬性，分別表示引入外部的CSS文件以及JS文件，為此我們引入fontawesome如下： ```json +++ b/first-app/angular.json @@ -29,12 +29,14 @@ ], "styles": [ "src/styles.css", - "./node_modules/bootstrap/dist/css/bootstrap.css" + "./node_modules/bootstrap/dist/css/bootstrap.css", + "./node_modules/@fortawesome/fontawesome-free/css/all.css" ], "scripts": [ "./node_modules/jquery/dist/jquery.slim.min.js", "./node_modules/popper.js/dist/umd/popper.min.js", - "./node_modules/bootstrap/dist/js/bootstrap.min.js" + "./node_modules/bootstrap/dist/js/bootstrap.min.js", + "./node_modules/@fortawesome/fontawesome-free/js/all.js" ] }, "configurations": { ``` 然后**重新啟動**`ng s`，并在模板文件中加入圖標進行測試： ```html +++ b/first-app/src/app/app.component.html @@ -1,7 +1,7 @@ <router-outlet></router-outlet> <div class="row"> <div class="col-12 text-right"> - <a class="btn btn-primary mr-2" routerLink="add">新增</a> + <a class="btn btn-primary mr-2" routerLink="add"><i class="fas? fa-plus?"></i>??新增</a> </div> </div> @@ -24,8 +24,12 @@ <td>{{ teacher.email }}</td> <td *ngIf="teacher.sex; else femaleBlock">男</td> <td> - <a class="btn btn-outline-primary btn-sm" [routerLink]="'edit/' + teacher.id">編輯</a> - <span class="btn btn-sm btn-outline-danger" (click)="onDelete(teacher.id)">刪除</span> + <a class="btn btn-outline-primary btn-sm" [routerLink]="'edit/' + teacher.id"> + <i class="fas? fa-pen?"></i>??編輯 + </a> + <span class="btn btn-sm btn-outline-danger" (click)="onDelete(teacher.id)"> + <i class="far? fa-trash-alt?"></i>??刪除 + </span> </td> </tr> </tbody> ``` - 使用`<i>`標簽結合`class`的方式來使用字體文件。?? - ? 字體文件標識（前綴），fontawesome字體前綴為`fas` 或`far`，其中僅有部分免費字體支持`far` ，所有字體均劫持`fas`。 - ? 以`fa`為前綴，表示fontawesome字體。不同的class對應不同的字體圖標，詳情請參考官網。  ### 測試環境 對項目測試環境`ng t`的配置位為`angular.json`文件配置的`projects -> firest-app -> architect -> test -> options上。`options`上一個`styles`屬性，一個`scripts`屬性，分別表示引入外部的CSS文件以及JS文件，為此我們引入fontawesome如下： ```json +++ b/first-app/angular.json @@ -99,12 +99,14 @@ ], "styles": [ "src/styles.css", - "./node_modules/bootstrap/dist/css/bootstrap.css" + "./node_modules/bootstrap/dist/css/bootstrap.css", + "./node_modules/@fortawesome/fontawesome-free/css/all.css" ], "scripts": [ "./node_modules/jquery/dist/jquery.slim.min.js", "./node_modules/popper.js/dist/umd/popper.min.js", - "./node_modules/bootstrap/dist/js/bootstrap.min.js" + "./node_modules/bootstrap/dist/js/bootstrap.min.js", + "./node_modules/@fortawesome/fontawesome-free/js/all.js" ] } }, ``` 使用`ng t`來測試App組件：  ## 自定義CSS 接著打開組件對應的CSS樣式表文件，實現兩個小功能：1. 增加按鈕間距； 2. 在圖標字體與字體中增加些空隙。 ```css .btn { margin-right: 0.5em; } .btn > svg { margin-right: 0.3em; } ``` 最終效果如下：  ## 本節作業 1. 在為圖標字體與字體中增加些空隙時，我們CSS定義為`.btn > svg`，而非`.btn > i`。請給出其中的原因。 2. 為教師添加組件、教師編輯組件中的按鈕添加字體圖標。 | 名稱 | 地址 | 備注 | | ----------------------- | ------------------------------------------------------------ | ---- | | fontawesome圖標庫 | [https://fontawesome.com/icons?d=gallery&p=2&m=free](https://fontawesome.com/icons?d=gallery&p=2&m=free) | | | fontawesome安裝文檔 | [https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers) | | | fontawesome基本使用方法 | [https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use) | | | 視圖包裝 | [https://angular.cn/guide/view-encapsulation#view-encapsulation](https://angular.cn/guide/view-encapsulation#view-encapsulation) | | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.6.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.6.2.zip) | |