Question

我有一个用于在此处实现表格排序的stackblitz Angular 5应用程序 - https://stackblitz.com/edit/angular-rxdzom。它基于http://www.carbonatethis.com/sort-table-columns-with-angular-and-typescript/的代码。它使用./app/sortable-table/sortable-column.component.css和内容：

.caret-up:before {
  content: "\f0d8";
}

.caret-down:before {
  content: "\f0d7";
}

和./app/sortable-table/sortable-column.component.html，其中包含两个使用class属性引用这些标记的i标记。它不是显示插入符号和插入符号，而是替换矩形框。如果我用Font Awesome库替换插入符号和插入符号，“fa fa-caret-up”和“fa fa-caret-down”，它可以正常工作。我的工作环境不使用Font Awesome，也不是添加它的选项，因此我需要手动创建css内容，因为我正在尝试上面。任何帮助表示赞赏！

我已经尝试过自己研究这个问题了，显然它看起来应该有效，但事实并非如此。我使用像http://webdesignerwall.com/tutorials/how-to-add-icon-fonts-to-any-element-with-css这样的引用似乎表明css是有效的，我尝试过使用“.caret-up i :: before”，这也是行不通的。我显然错过了什么或做错了什么。我甚至尝试添加

padding-right: 10px;
font-family: "FontAwesome";

在内容属性之前，但也没有帮助。

Answer 1

我假设上面显示的css位于组件的styles属性中？如果是这样，问题是退格需要在字符串中进行转义。将它们更新为以下内容，你应该很好！

.caret-up:before {
  content: "\\f0d8";
}

.caret-down:before {
  content: "\\f0d7";
}

Answer 2

添加图标的替代方法是通过材质图标您可以在此处找到图标：https://material.io/icons/ 在index.html中包含以下链接

在css中添加课程＆＃39; material-icons＆＃39;到你的财产。例如- keyboard_arrow_up

您可以在上面提供的材料图标链接中引用不同的符号名称。

Answer 3

好的，所以这部分原因是我对自己的环境一无所知。我们已经更新了字体真棒到语义UI，它使用字体真棒字体的端口，所以我只需要使用这些字体。要手动完成，我可以使用：

.caret-up:after {
padding-right: 10px;
font-family: Icons;
content: "\f0d8";
}

.caret-down:after {
padding-right: 10px;
font-family: Icons;
content: "\f0d7";
}

并将图标放在文本后面，我只需将“ng-content”标记移动到“i”标记上方，用于asc / desc排序顺序。因此，使用Semantic UI字体，我的sortable-column.component.html变为：

<ng-content></ng-content>
<i class="caret up icon" *ngIf="sortDirection === 'asc'"></i>
<i class="caret down icon" *ngIf="sortDirection === 'desc'"></i>

效果很好。我在https://stackblitz.com/edit/angular-nfwe6j分叉了我的Stackblitz应用程序，以显示如何使用字体真棒字体的语义UI 2.3.1在我的环境中完成这项工作。

角度应用程序样式unicode字符

3 个答案: