MurhafSousli
commented
2 years ago The ShareIconModule does not import each and every share icon, it only import the default set of icons!
If you want to use custom icons, you have to import them manually.
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIcons(faFacebookSquare, faTwitterSquare, faPinterest, faPinterestSquare, faWhatsappSquare);
}
}Here is a fixed stackblitz
I tried to dig up the issue regarding why the icon would not show up. After spending some time, I came up with the following statement.
The library is not taken into consideration even if I specify the library such as fab. It is always using the default fas library as shown in the image below.
I have the following in my module class:
import { NgModule } from '@angular/core'; import { CommonModule} from '@angular/common'; import { RouterModule } from '@angular/router'; import { SocialMediaBarComponent } from "./social-media-bar.component"; import { ShareButtonsConfig,ShareModule } from 'ngx-sharebuttons'; import { ShareButtonsModule } from 'ngx-sharebuttons/buttons'; import { ShareIconsModule } from "ngx-sharebuttons/icons"; import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'; import { faPinterestP } from '@fortawesome/free-brands-svg-icons/faPinterestP'; import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp'; import { library } from '@fortawesome/fontawesome-svg-core'; import { fab } from '@fortawesome/free-brands-svg-icons'; import { fas } from '@fortawesome/free-solid-svg-icons'
import {FaIconLibrary} from "@fortawesome/angular-fontawesome";
const shareProp = { prop: { facebook: { icon: ['fab', 'fa-facebook-square'] }, twitter: { icon: ['fab', 'fa-twitter-square'] }, pinterest:{ icon: ['fab', 'fa-pinterest-square'] }, whatsapp:{ icon: ['fab', 'fa-whatsapp-square'] } } };
@NgModule({ imports: [ CommonModule, RouterModule, ShareIconsModule, ShareButtonsModule.withConfig(shareProp) ], declarations: [ SocialMediaBarComponent ], exports: [ SocialMediaBarComponent ] })
export class SocialMediaBarModule {
}
I have the following in my component
import {Component, EventEmitter, OnInit, Output} from "@angular/core"; import {findIconDefinition, library} from "@fortawesome/fontawesome-svg-core"; import {IconDefinition} from "@fortawesome/fontawesome-common-types"; import {fab, faFacebookSquare, faTwitterSquare} from "@fortawesome/free-brands-svg-icons"; import {fas} from "@fortawesome/free-solid-svg-icons"; import {faPinterestP} from "@fortawesome/free-brands-svg-icons/faPinterestP"; import {faWhatsapp} from "@fortawesome/free-brands-svg-icons/faWhatsapp";
@Component({
selector:'social-media-bar', template:`
, styles:[@import url('https://fonts.googleapis.com/css?family=Calligraffitti');/ ng-sharebutton/
:root { --facebook: #4267B2; --twitter: #00acee; --google: #db4437; --mix: #ff8226; --line: #00b900; --linkedin: #006fa6; --pinterest: #bd081c; --reddit: #ff4006; --tumblr: #36465d; --whatsapp: #25d366; --messenger: #0080FF; --telegram: #0088cc; --xing: #006567; --sms: #20c16c; --email: #FF961C; --viber: #665ca7; --vk: #4C75A3; --copy: #607D8B; --print: #765AA2; --expand: #FF6651; }
/* Colors variables / .sb-default .sb-wrapper { --sb-color: #fff; --sb-background: red; --sb-border-radius: 4px; --sb-overflow: hidden; }
.sb-default .sb-wrapper.sb-show-icon.sb-show-text { --sb-text-padding: 0 1em 0 0; }
.sb-default .sb-wrapper.sb-show-icon.sb-show-text .sb-text { filter: none; }
/**/
*{ margin: 0; padding: 0; border: 0;}
html{ height: 80%; } body{ font-family: 'Calligraffitti', cursive; height: 100%; background: #F0EEE1; text-align: center; }
h1{ font-size: 50px; margin-top: 75px; color: #A40802; }
h3{ font-size: 20px; color: #945C5F; margin-top: 20px; }
h4{ font-size: 25px; margin-top: 75px; color: #6E4670; }
.social{ list-style: none; margin-top: 80px; display: flex; justify-content: center; }
.social>li{ float: left; }
.social a{ text-decoration: none; color: #ffffff; padding: 50px; padding-bottom: 40px; background: #454444; box-shadow: 0px 5px 1px rgba(0, 0, 0, 0.25); transition: 1s; }
.social .link.linkedin{ border-radius: 0px 20px 20px 0px; }
.social .link.twitter{ border-radius: 20px 0px 0px 20px; }
.fa{ text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25); }
.social .link{ font-size: 45px; transition: 1s; }
.social .link:hover{ transition: 1s; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); }
.social .link.twitter:hover{ background: #1da1f2; }
.social .link.linkedin:hover{ background: #0077CB; }
.social .link.codepen:hover{ background: #8B9DC3; }
.social .link.whatsapp:hover{ background: #00E676; }
.social .link.github:hover{ background: #333; }
.social .link.dribbble:hover{ background: #ea4c89; }
.social .link.pinterest:hover{ background: #c8232c; }
.social .link.hotmail:hover{ background: #4875B4; }
.social .link.facebook:hover{ background: #3B5998; }
.social .link.stack-overflow:hover{ background: #f48024; }`]
})
export class SocialMediaBarComponent {}
Reproduction
I have reproduced the problem in the Stackblitz link below:
https://stackblitz.com/edit/ngx-sharebuttons-byv5ny?file=src%2Fapp%2Fapp.module.ts
Expected Behavior
What behavior were you expecting to see? I expect to see the icons
Actual Behavior
What behavior did you actually see? The icons are not showing up.
Environment