Toolbar icons are not showing

[rinkuanuragkumar]

Toolbar Icons are not showing. kindly resolve my issue.

[kolkov]

Hi! Try to check is fonts awesome v4.7 included.

[xaroxhoan]

i have the same issue!

[derd1011]

@rinkuanuragkumar i have same issue in gull template in style.css ` angular-editor-toolbar button i { font-family: FontAwesome !important; color: #474d6d !important;

} ` use this line to override other icon class

i think this help you..

[ProggaIlma]

I am having the same problem.I have "@fortawesome/fontawesome-free": "5.13.0", installed also added the css `angular-editor-toolbar button i { font-family: FontAwesome !important; color: #474d6d !important;

}`

[filipano]

Hi, still having the issue

[emanuelevivoli]

Same issue

the work-around have no effect .... some advice?

[derd1011]

`angular-editor-toolbar button i { font-family: FontAwesome !important; color: #474d6d !important;

}` this working great please inspect and check if any other css are overwrite. remove this i think its work..

[jfoxworth]

I tried these fixes, but the button icons are still not showing.

[hiennm0406]

Same issue i'm use angular 9

[nomankt]

facing same issue

[Ayushsingh4]

I am having the same problem.I have "@fortawesome/fontawesome-free": "5.13.0", installed also added the css `angular-editor-toolbar button i { font-family: FontAwesome !important; color: #474d6d !important;

}`

thanks buddy...it worked for me

[ChipClark]

icons were working with fontawesome 5.13 - but I've updated to fontawesome 6. I'd rather not include both versions to have the icons in my application and the icons in the editor.

[ChipClark]

This can be resolved by:

npm install --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free--svg-icons npm install --save @fortawesome/angular-fontawesome

add/edit the following files:

angular-editor.module.ts import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

angular-editor.component.ts import {FaIconLibrary, FontAwesomeModule} from '@fortawesome/angular-fontawesome'; import {far} from '@fortawesome/free-regular-svg-icons'; import {fas} from '@fortawesome/free-solid-svg-icons';

constructor(
   library: FaIconLibrary,
) {
  library.addIconPacks(fas, far);
}

angular-editor-toolbar.component.ts edit all icon tags.
to <fa-icon [icon]="['fas', 'icon-name']" >

[engineer-andrew]

I encountered the same problem after upgrading my application from Angular 12 to 14 and the editor from 1.. to 2... I noticed in my console that something was trying to load fonts from http://localhost:4200/assets/fonts - a directory I don't have at all - and was getting a 404 response for each font, which makes sense since I don't have that directory at all.

I went back to the README for this repository and found a section that says "To serve the fontawesome files, ensure that your angular.json contains the following asset configuration:". After adding the subsequent configuration to my angular.json, all of the icons loaded up immediately and everything works fine. I didn't even have to install fontawesome 4.7.

{
  "glob": "**/*",
  "input": "./node_modules/@kolkov/angular-editor/assets/",
  "output": "./assets/fonts/"
}

I think - at least for me - this piece was easy to miss in the README because I don't believe it was required in the previous version I was using. Perhaps some folks here are experiencing a similar issue and this is a solution that will also work for them.

[yudonglin]

For someone who may find @engineer-andrew 's explanation confusing, I met the same problem in the first place, but I figured it out. I assume what @engineer-andrew wants to say is to put the stuff under the "assets," for example:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/@kolkov/angular-editor/assets/",
    "output": "./assets/fonts/"
  }
],

I hope this will help explain.

[cblier]

@yudonglin @engineer-andrew This worked perfectly for me as well. I followed the same update path as Andrew, Thanks for posting this...

[RemRanger]

The solution given by yudonglin work fine for me locally, thanks! However, in our deployment environments, the icons still don't show. Inspection in my browser's Network tab reveals that a GET call is done to https://test.join-data.net/assets/fonts/fontawesome-webfont.woff?v=4.7.0 (along with two other similar calls) where our application's root URL is https://test.join-data.net/my-join-data-partners

When i do a call to https://test.join-data.net/my-join-data-partners/assets/fonts/fontawesome-webfont.woff?v=4.7.0 from Postman, including the 'my-join-data-partners' part, I do get a result. Apparently, kolkov is using the wrong URL to get the font from.

I tried adding '/my-join-data-partners' to the "output" part of the assets configuration above, but that made no difference.

So, my question is: how can I configure the kolkov editor in such a way that it will fetch the fontawesome from the right URL?

Edit: having consulted my colleagues, we found that downgrading the kolkov editor solves the problem. In my case, i had to downgrade to version 2.0.0 since the newer versions assume Angular 14, where we are still at 13. That said, it appears something has changed in version 3.0.0-beta.0 . This may be a bug that has to be fixed.

[philecom]

If the above solutions don't work for you, you can try what I did. 1) Copy the entire content of "node_modules\@kolkov\angular-editor\assets" 2) Create a folder called "fonts" in your app assets folder so you will have "src\assets\fonts" 3) Paste the copied contents (font awesome files).

that's all.

[Buddy-Masri]

@philecom thanks a lot mate! a great solution.

[Sunshine89]

@philecom Thanks, buddy. It worked for me.