skip to Main Content

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.

2

Answers


  1. Try this one

    [shareButton] is a directive that converts its host element to a share button.

    https://ngx-sharebuttons.netlify.app/#/share-button-directive

    Login or Signup to reply.
  2. 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);
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search