Как импортировать потрясающий шрифт в проект STACKBLITZ JS?

Я работаю над чистым проектом javascript (без каких-либо фреймворков) в STACKBLITZ. У него есть возможность установить зависимости. Но как импортировать его в мой файл index.js, чтобы я мог использовать его в своем HTML-файле.

Я сослался на ДОКУМЕНТАЦИЯ шрифта awesome. Но у меня проблемы с поиском пути к этим файлам для импорта.


import font-awesome stackblitz
person Prabhu    schedule 26.08.2019    source источник
comment
Привет, prabhu, ты не удовлетворен моим ответом? Вы проверили предоставленную скрипку? Дайте мне знать, в чем проблема, чтобы помочь вам в дальнейшем   -  person Meziane    schedule 03.03.2020
comment
Привет @Meziane, у меня не было времени проверить это решение. Прошу прощения, что не отвечаю. Меня задержало что-то другое. Я проверю и отвечу как можно скорее. Спасибо за ответ в любом случае. Очень признателен.   -  person Prabhu    schedule 03.03.2020

Ответы (2)


arrow_upward
2
arrow_downward

Вам нужно добавить следующие зависимости в ваш package.json:

"@fortawesome/angular-fontawesome": "^0.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.21",
"@fortawesome/free-solid-svg-icons": "^5.12.1"

Импортируйте FontAwesomeModule в свой app.module.ts:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

и добавьте его в массив imports:

@NgModule({
  imports:      [ BrowserModule, FormsModule, FontAwesomeModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Чтобы использовать, например, значки faThumbsUp, faThumbsDown в шаблоне компонента, вы должны импортировать их в файл компонента .ts.

import { faThumbsUp, faThumbsDown } from '@fortawesome/free-solid-svg-icons';

Добавьте свойства к компоненту и назначьте им эти значки:

export class VoterComponent  {
  @Input() name: string;

  faThumbsUp = faThumbsUp
  faThumbsDown =  faThumbsDown

}

Используйте свойства (то есть значки) в шаблоне компонента или в его файле .html следующим образом:

<div class="col-sm-2">
<button class="btn btn-primary">  
  <fa-icon [icon]="faThumbsUp"></fa-icon>
</button>

Вот работающий stackblitz. Надеюсь, это поможет другим.

person Meziane    schedule 06.02.2020
comment
Привет, prabhu, надеюсь, вы попробуете мой ответ: пожалуйста, взгляните на предоставленный файл stckbliz. - person Meziane; 06.02.2020
comment
Привет @Meziane, твое решение действительно решило мою проблему. Большое спасибо за предоставленный мне ответ. - person Prabhu; 10.03.2020
comment
Привет, Прабху, добро пожаловать. Приятно это слышать. - person Meziane; 11.03.2020

arrow_upward
2
arrow_downward

Один из способов получить потрясающий шрифт — добавить в ваш index.html следующую строку:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

Выдержка отсюда

person catra    schedule 30.12.2019