css - Angular 应用程序样式化 unicode 字符

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 包含两个 i 标签，这些标签使用 class 属性引用它们。它没有显示向上插入符号和向下插入符号，而是用一个矩形框代替。如果我用 Font Awesome 库“fa fa-caret-up”和“fa fa-caret-down”替换 caret-up 和 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";

在 content 属性之前，但这也没有帮助。

Answer 1

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

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

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