Font-Issue on Close Button(Icon)


Topic: Font-Issue on Close Button(Icon)

Aroquiassamy LA ROZE pro premium asked 2 years ago

Hi @Damian,

I Have used a Font on my project and I faced a issue on close button(icon) on ALERT,NOTIFICATION. Tell me how to change the Font.Do you have any class or option to change font.If not tell me correct format and Font to change Font Globally for all including close button(icon).


Damian Gemza staff answered 2 years ago

Dear La Roze,

Unfortunately, I don't understand your question.

Could you please describe, what do you need from us more clearly?

Best Regards,

Damian


Aroquiassamy LA ROZE pro premium answered 2 years ago

  1. Currently I'm using a font while using I'm facing issue on
    Notification or Alerts close button/icon is not visible.How to change that close icon/button i.e., x.

2 . And I want to use Fonts so how to use/change fonts properly on MDB for that guide me


Damian Gemza staff answered 2 years ago

Dear La Roze,

Which fonts you're using? Do you mean Font Awesome? I need clear information from you.

1) Please show me the code which you're using to show Alerts / Notifications. If you want to have a close (X) button in your Notification (toast), you have to use proper config option - closeButton: true.

Please take a look at the below code:

.html:

<a class="btn btn-info waves-light" (click)="showInfo()" mdbWavesEffect>Info message</a>

.ts:

constructor(private toastrService: ToastService) {
  }

  showInfo() {
    this.toastrService.info('Info message', '', {closeButton: true});
  }

2) Still, I don't understand this paragraph. Which fonts do you want to use? The Font Awesome 5 library? Or some normal font (text)?

If you want to use the Font Awesome 5 library, you have to do following steps:

Install the Font Awesome 5 library using the npm install @fortawesome/fontawesome-free command,

Import the necessary Font Awesome 5 styles in your angular.json file:

"styles": [ "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", ],

Now you're able to use the <mdb-icon></mdb-icon> component.

Best Regards,

Damian


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.0.0
  • Device: Desktop-Lenova
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No