Editor icons are not loading in sub directory

[raghav-khunger]

They are throwing 404 as the angular site (where the editor is) is hosted in a sub directory i.e /child and the editor is expecting the files from root domain. Can you share how to set the root directory path so that the editor can start picikng the files from sub directory?

Angular Version: 14.2 Angular Editor Version: 3.0.0-beta.0

[kolkov]

Hi! Are you sure, that you install a correct version of font awesome?

[raghav-khunger]

Hi @kolkov,

The steps are simple.

• Have two domains: abc.com and abc.com/child
• Install Angular site on abc.com/child.
• Add angular-editor to any page on abc.com/child site.
• The icons of editor will be missing.

The reason for the missing icons is that the editor is picking the icons from the parent domain i.e the font files are being fetched from:

• abc.com/assets/fonts/fontawesome-webfont.woff2
• abc.com/assets/fonts/fontawesome-webfont.woff
• abc.com/assets/fonts/fontawesome-webfont.ttf

Possible solution:

The icons for the editor should be picked from child site where the Angular site is instead of from root domain. The editor can make use of base href present in index.html of Angular site (base href="/child/"). The correct path should be:

• abc.com/child/assets/fonts/fontawesome-webfont.woff2
• abc.com/child/assets/fonts/fontawesome-webfont.woff
• abc.com/child/assets/fonts/fontawesome-webfont.ttf

Exploring the source code I can guess that the path is being picked from here: https://github.com/kolkov/angular-editor/blob/master/projects/angular-editor/src/lib/style.scss

Code: $fa-font-path: "/assets/fonts" !default;

If we change "/assets/fonts" to "assets/fonts", it should fix the issue.

What do you think?

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

[cefamax]

I have the same problem; my app is in a subfolder of the root directory, if I copy assets/fonts folder in the root folder the icon is show in the tool-bar otherwise not. I no idea to resolve this problem!

[nippy58]

Hi we have had same probelm and think its fesm2020 kolkov-angular-editor-mjs is being build with /assets and not ./assets @raghav-khunger mentioned it above - is there any chance this can be done? Otherwise if you include your editor site that doesnt have a /assets folder (we have many) it wont find the fonts.

[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; 
  }