JHipster and Social login button

Question

I have a project that is written in JHipster v4.9.0 and I am working on a upgrade to v 5.3.0.

I really miss the social login feature from earlier versions of JHipster and I need the social login buttons and service back in my project.

I have installed bootstrap social from https://libraries.io/npm/bootstrap-social with the command:

npm install bootstrap-social@5.1.1

Now I have in my package.json file the line

"bootstrap-social": "5.1.1",

Then I have in my login page

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

But my problem is that I can not see the facebook logo on my button. Is there anything more I have to do to get the logo to show up?

Answer 1

The Facebook logo is using Font Awesome, which changed the imports in v5. First, add the following package in your package.json to the specified version (this includes brand icons such as social networks):

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

You also need to import the icon in vendor.ts:

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

Finally, you need to add the icon in the HTML, similar to how others are used (but specify the fab for a Brand Icon). There are several examples in the navbar for icons, a Facebook icon will look like below:

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