Hey there! I have an Angular 5 app on StackBlitz that implements table sorting. You can check it out here: https://stackblitz.com/edit/angular-rxdzom. The code for this app is based on the example from . In the app, I've used a stylesheet at ./app/sortable-table/sortable-column.component.css with the following content:
.caret-up:before {
content: "\f0d8";
}
.caret-down:before {
content: "\f0d7";
}
The HTML file at ./app/sortable-table/sortable-column.component.html contains two i tags that reference these classes in the stylesheet. However, when I try to replace the caret symbols with Font Awesome icons ("fa fa-caret-up" and "fa fa-caret-down"), they display as rectangular boxes instead. Unfortunately, I cannot use Font Awesome in my work environment, so I'm trying to manually create the necessary CSS content. Any suggestions or assistance would be greatly appreciated!
I've done some research on my own and thought I had the correct solution, but it's not working as expected. I've referred to resources like which suggest that the CSS should be valid. I also attempted using ".caret-up i::before", but that didn't solve the issue either. I even experimented with adding:
padding-right: 10px;
font-family: "FontAwesome";
before the content property, but unfortunately, it did not provide the desired outcome.