# 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) | |