JHipster и кнопка входа в систему

Question

У меня есть проект, написанный на JHipster v4.9.0, и я работаю над обновлением до v 5.3.0.

Я очень скучаю по функции входа в соцсети из более ранних версий JHipster, и мне нужны кнопки и сервис входа в соцсетях в моем проекте.

Я установил загрузчик из https://libraries.io/npm/bootstrap-social с помощью команды:

npm install bootstrap-social@5.1.1

Теперь в моем файле package.json есть строка

"bootstrap-social": "5.1.1",

Тогда у меня на странице входа в систему

<a class="btn btn-block btn-social btn-facebook">
  <span class="fa fa-facebook"></span>
  Sign in with Facebook  
</a>

Но моя проблема в том, что я не вижу логотип facebook на своей кнопке. Что еще нужно сделать, чтобы логотип появился?

Answer 1

Логотип Facebook использует Font Awesome, который изменил импорт в v5. Во-первых, добавьте следующий пакет в вашем package.json к указанной версии (это включает в себя значки брендов, такие как социальные сети):

npm install --save @fortawesome/free-brands-svg-icons

Вам также необходимо импортировать значок в vendor.ts:

import {
    faFacebook
} from '@fortawesome/free-brands-svg-icons';
....
library.add(faFacebook);

Наконец, вам нужно добавить значок в HTML, аналогично тому, как используются другие (но укажите fab для значка бренда). В панели навигации есть несколько примеров значков, значок Facebook будет выглядеть следующим образом:

<fa-icon [icon]="['fab', 'facebook']"></fa-icon>