JHipster 和社交登录按钮

Question

我有一个用 JHipster v4.9.0 编写的项目，我正在升级到 v 5.3.0。

我真的很怀念 JHipster 早期版本的社交登录功能，我需要在我的项目中重新使用社交登录按钮和服务。

我已经安装了 Bootstrap Social https://libraries.io/npm/bootstrap-social使用命令:

npm install <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9d90908b8c8b8d9e8fd28c909c969e93bfcad1ced1ce" rel="noreferrer noopener nofollow">[email protected]</a>

现在我的 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 Logo 。我还需要做什么才能让 Logo 显示出来吗？

Answer 1

Facebook Logo 使用 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>