Угловое приложение для стилизации символов Юникода

Question

У меня есть приложение стекаблица 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», она будет работать правильно.Моя рабочая среда не использует 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

Альтернативой для добавления значков является использование значков материалов. Значки можно найти здесь: https://material.io/icons/ Включите следующую ссылку в ваш index.html

И в CSS добавьте класс 'material-иконки к вашей собственности.Например: keyboard_arrow_up

Вы можете ссылаться на названия различных символов в приведенной выше ссылке на значки материалов.

Answer 2

Хорошо, так что отчасти я был в неведении относительно нашего окружения.Мы обновили шрифт Awesome до Semantic UI, который использует порт шрифта Awesome Fonts, поэтому мне просто пришлось использовать эти шрифты.Чтобы сделать это вручную, я мог бы использовать:

.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>

И он отлично работал.Я разветвил свое приложение Stackblitz на https://stackblitz.com/edit/angular-nfwe6j, чтобы показать, как это было достигнуто в моей среде с использованием Semantic UI 2.3.1 шрифтов. Шрифты.

Answer 3

Я полагаю, что CSS, показанный выше, находится в свойстве стилей вашего компонента?Если это так, проблема заключается в том, что в вашей строке должен быть экранированный символ возврата.Обновите их до следующего, и вы должны быть хорошими!

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

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