Угловой с FontAwesome: не может стилизовать путь - PullRequest
0 голосов
/ 01 июля 2019

Я создал новый проект, установил font-awesome:

"@fortawesome/angular-fontawesome": "^0.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-brands-svg-icons": "^5.9.0",

Импортировано FontAwesomeModule:

imports: [
    ...,
    FontAwesomeModule
],

И создал простую иконку:

faFacebook = faFacebook;
<fa-icon [icon]="faFacebook"></fa-icon>

Значок успешно отображается. Теперь я хочу стилизовать path сгенерированного значка:

path {
  fill: red;
}

Но это не работает. Мой Chrome даже не печатает это правило в инструментах разработчика.

Как мне стиль path? Я должен стиль path, а не fa-icon (чтобы применить градиент с fill: url(#gradient)).

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Вы можете напрямую изменить стиль красивых иконок, передав атрибут [style], как показано ниже.

<fa-icon [icon]="faFacebook" [styles]="{'stroke': 'red', 'color': 'red'}">
</fa-icon>
0 голосов
/ 01 июля 2019

Angular предлагает по умолчанию инкапсуляцию (эмуляцию) стилей.Это означает, что каждый компонент независим, и у вас не будет конфликта между двумя компонентами на одной странице.(если они используют одно и то же имя класса, например).

https://angular.io/guide/component-styles

Из официальной документации Angular:

Просмотр инкапсуляции

Как обсуждалось ранее, стили CSS компонента инкапсулированы в представление компонента и не влияют на остальную часть приложения.

Чтобы контролировать, как происходит эта инкапсуляция для каждого компонента, вы можете установитьрежим инкапсуляции вида в метаданных компонента.Выберите один из следующих режимов:

  • Инкапсуляция вида ShadowDom использует собственную реализацию теневого DOM браузера (см. Shadow DOM на сайте MDN) для присоединения теневого DOM к элементу хоста компонента, а затемпомещает компонентный вид в этот теневой DOM.Стили компонента включены в теневой DOM.

  • Инкапсуляция в собственном представлении использует устаревшую версию встроенной реализации теневого DOM браузера - узнайте об изменениях.

  • Эмулированная инкапсуляция представлений (по умолчанию) имитирует поведение теневого DOM путем предварительной обработки (и переименования) кода CSS, чтобы эффективно охватить CSS для представления компонента.Подробности см. В Приложении 1.

  • Нет означает, что Angular не просматривает инкапсуляцию.Angular добавляет CSS к глобальным стилям.Обсуждаемые ранее правила определения границ, изоляции и защиты не применяются.По сути, это то же самое, что и вставка стилей компонента в HTML.

Для стилизации элемента, включенного в компонент, (и если эта функция не предоставляется библиотекой компонентов, этоself), тогда у вас есть 2 варианта:

1) Добавить свой стиль в глобальный styles.css

Нет никакой инкапсуляции для стилей, определенных внутри global styles.css,

В вашем компоненте:

<fa-icon class="my-global-icon" [icon]="faFacebook"></fa-icon>

В вашем styles.css или styles.scss:

fa-icon.my-global-icon path {
  fill: red;
}

2) Отключить эмуляцию инкапсуляции

По умолчанию инкапсуляция активна (эмулируется) в стилях, определенных внутри компонента.Чтобы отключить его, вы должны установить encapsulation = ViewEncapsulation.None

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  {
...

. В этом случае вы сможете стилизовать подэлемент, включенный в прямой дочерний элемент вашего компонента.Но будьте осторожны, вы можете столкнуться с другими проблемами со стилем конфликта.Теперь ваша работа - управлять ими.

Надеюсь, это поможет.

...