我有一个用JHipster v4.9.0编写的项目,我正在努力升级到v 5.3.0。
我真的错过了早期版本的JHipster的社交登录功能,我需要在项目中重新添加社交登录按钮和服务。
我从以下位置安装了bootstrap social 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徽标。我还需要做些什么才能使徽标显示出来?
答案 0 :(得分:1)
Facebook徽标使用的是Font Awesome,它更改了v5中的导入。首先,在package.json中将以下软件包添加到指定版本(其中包括品牌图标,例如社交网络):
"@fortawesome/free-brands-svg-icons": "5.3.1",
您还需要将图标导入vendor.ts:
import {
faFacebook
} from '@fortawesome/free-brands-svg-icons';
....
library.add(faFacebook);
最后,您需要在HTML中添加图标,类似于使用其他图标的方式(但请为品牌图标指定fab
)。导航栏中有一些图标示例,一个Facebook图标如下所示:
<fa-icon [icon]="['fab', 'facebook']"></fa-icon>