JHipster 和社交登录按钮

Question

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

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

我已经使用以下命令从https://libraries.io/npm/bootstrap-social安装了 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>