social share button in angular 10 ngx-sharebuttons

user_8198146 0
Viewed 7093

I am implementing the ngx-sharebuttons for social share button like facebook, whatsapp.

this is what I tried

installed package

  1. npm i cdk
  2. npm i ngx-sharebuttons
  3. npm i @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';

 ShareButtonsModule.withConfig({
      debug: true
    }),
    ShareIconsModule

<share-buttons [theme]="'material-dark'"
[include]="['facebook','twitter','linkedin','pinterest','reddit','mix','vk','telegram','messenger','whatsapp','xing','line','sms','email','copy']"
[show]="9"
[size]="1"
[url]="'https://www.eduforbetterment.com/generate-qr-code-in-angular/'"
[image] ="'https://www.eduforbetterment.com/wp-content/uploads/2020/08/qrcode.jpg'"
[autoSetMeta]="false"
></share-buttons>

everything is working but I am not able to see the social icons for share like facebook, twitter, whatsapp and so on.

I followed this link

share button is creating but not icons are not creating

As you can see in the image share button is creating but icons are not creating.

below is my package.json file

"@angular-devkit/core": "10.0.1",
    "@angular/animations": "^10.0.2",
    "@angular/cdk": "^11.0.0",
    "@angular/cli": "^10.0.1",
    "@angular/common": "10.0.2",
    "@angular/compiler": "10.0.2",
    "@angular/core": "10.0.2",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "10.0.2",
    "@angular/localize": "^10.0.2",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "10.0.2",
    "@angular/platform-browser-dynamic": "10.0.2",
    "@angular/router": "10.0.2",
    "@fortawesome/angular-fontawesome": "^0.8.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "bootstrap": "^4.5.2",
    "chartist": "^0.11.4",
    "core-js": "^2.6.11",
    "hammerjs": "^2.0.8",
    "ng-chartist": "4.1.0",
    "ngx-sharebuttons": "^8.0.4",
    "ngx-spinner": "^10.0.1",
    "node-sass": "^4.13.1",
    "rxjs": "^6.6.0",
    "rxjs-compat": "^6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"

Please help me where I am doing wrong.

share-button whatsapp angular10 facebook icons
2 Answers

I used fontawesome icons instead (you import what you need)

import { faFacebookF, faTwitter } from '@fortawesome/free-brands-svg-icons';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
constructor(
    iconLibrary: FaIconLibrary,
  ) {
    iconLibrary.addIcons(faTwitter, faFacebookF);
  }
user_120778050
user_68987390
Related