The icons not showing in Simple UI

[grafox]

Dear Sir,

Thank you for your work and good job. I use your editor in my project. It base on angular 5 , mdbootstrap for angular. The icons is not showing in toolbar just few like h1-h5 , p and the others is missing. In my project font-awesome.scss and bootstrap.scss include in style section of angular-cli.json. any suggestion.

Thanks.

[onaluf]

Hi grafox, sorry for the late answer...

The icons used for Simple UI and Bootstrap UI come from fontawsome 5.0, if I'm not mistaken you're using 4.7. The CSS class they use is not exactly the same, Hx works because they simply use plain text instead of fontawsome.

You can look at https://github.com/onaluf/fate/blob/master/src/app/fate-icon.service.ts for the exact mapping but it's rather easy for you to change the fonts used by fate, I tried to explain it in the README: https://github.com/onaluf/fate#custom-icons

In your case what you want is probably:

import { Injectable } from '@angular/core';

import { FateIconService } from 'fate-editor';

@Injectable()
export class MdbootstrapIconService extends FateIconService {
protected iconMapping: any = {
    'bold' : '<i class="fa fa-bold"></i>',
    'italic' : '<i class="fa fa-italic"></i>',
    'underline' : '<i class="fa fa-underline"></i>',
    'strike' : '<i class="fa fa-strikethrough"></i>',
    'subscript' :  '<i class="fa fa-subscript"></i>',
    'superscript' : '<i class="fa fa-superscript"></i>',
    'indent' : '<i class="fa fa-indent"></i>',
    'outdent' : '<i class="fa fa-outdent"></i>',
    'ordered' : '<i class="fa fa-list-ol"></i>',
    'unordered' : '<i class="fa fa-list-ul"></i>',
    'center' : '<i class="fa fa-align-center"></i>',
    'justify' : '<i class="fa fa-align-justify"></i>',
    'left' : '<i class="fa fa-align-left"></i>',
    'right' : '<i class="fa fa-align-right"></i>',
    'undo' : '<i class="fa fa-undo"></i>',
    'redo' : '<i class="fa fa-repeat"></i>',
    'clean' : '<i class="fa fa-eraser"></i>',
    'link' : '<i class="fa fa-link"></i>',
  };
}

And then you inject this in your module instead of the standard one:

@NgModule({
  // ...
  providers: [
    { provide: FateIconService, useClass: MdbootstrapIconService }
  ],
  // ...
})

I hope this help... Tell me if anything doesn't work for you.

ps. maybe I'll add this in the repos as an alternative since you're most probably not the only one that may want to use older version of fontawsome.

[onaluf]

:tada: This issue has been resolved in version 1.6.11 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[onaluf]

The legacy fontawsome service is not part of master, you can switch to it by doing:

{ provide: FateIconService, useClass: FateFontawsomeLegacyIconService }

[grafox]

Thank you man. The Icons know showing but it is work perfectly with tag only not with the simple ui tag. Thanks again.

[onaluf]

Yes, it's true because fate-material uses another set of icons. Sadly this means that it's not as easy to redefine which Icon provider is used. To get the same effect you will need to subclass FateMaterialComponent and change the provider in its @Component annotation.