Editor icons are not loading

[geekdeb]

I am trying on Angular-14 and angular-editor-2.2.0-beta.0. The Editor icons are not loading.

Also, I could see these errors in the console. And I guess this is due to the removal of the CDN link in the latest merge.

Kindly let me know the workaround if any.

[pietzschke]

Yes, please use the new v3.0.0-beta.0 version and include the following in the assets section in the angular.json:

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

[alex-goods]

hi
i tried this approach but its still not working, i have no console errors but the icons are not showing, i can see them in the devtools but the button is empty

thx

[anandjaisy]

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

worked for me

[T4toh]

Have the same issue.

[ArturGudiev]

There are 2 assets. build and test in angular.json

Make sure you included it into build assets like this

[T4toh]

There are 2 assets. build and test in angular.json

Make sure you included it into build assets

I fix the issue installing awesome fonts or something like that. I couldn't find the dependency in the documentation, but the dev of the package talk about it in an issue like this one.

[alex-goods]

anandjaisy

this worked for me too, thx:>

[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.

[youquijano]

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

worked for me

this also worked for me.

[youquijano]

i run this cli
ng build --c=production --base-href /mysite/

but still the icons are not showing. what am i missing?

[dmitrikovalevski]

I moved object with { glob, input, output } above. It take first position below all strings. This works for me.

[veer05]

Same issue, I use --base-href and the application is trying to look at parent path and fails
Temporary workaround

In index.html file add this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 2. In your css file add this

::ng-deep angular-editor-toolbar button i {
  font-family: FontAwesome !important; 
  } 

[Pimpollo30]

Same issue, I use --base-href and the application is trying to look at parent path and fails Temporary workaround

In index.html file add this <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 2. In your css file add this

::ng-deep angular-editor-toolbar button i {
  font-family: FontAwesome !important; 
  } 

@veer05 temporary solution worked for me, thanks

[ZenulAbidin]

This might be obvious but also check that your font was not set to a white color by accident by some framework - in that case the fonts are actually loaded but you might be fooled into thinking they are not present.

[qqaimh]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[BraianS]

Good morning everyone, it worked perfectly.

[mohaseebtariq]

#573

I fixed this by adding the font, and it worked initially. But when I added a glob in angular.json to include icons in my build, they still wouldn’t show up when running locally. Another issue was that my app has a baseUrl, so all assets load from there, but the FontAwesome files were being served internally from the library, which broke the pathing. To solve this, I forked the library and added the Angular @fortawesome/angular-fontawesome package. Now, the icons load consistently with the rest of the assets, and this issue won’t reoccur.

Until my PR gets merged, I’ve uploaded it to my npm registry for anyone interested: npm i @mhaseebtariq/angular-editor. I’m also using it in production at my company. Once the PR is approved, you can switch back to the original package—credit, of course, goes to the original author. This is just a quick fix!