[BUG] FontAwesome request fails with 404
Question
This is for version 0.14.33. After initializing the canvas and selecting an element 3 network requests are generated to the following:
- https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff2?v=4.7.0
- https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff?v=4.7.0
- https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.ttf?v=4.7.0
All 3 requests fail with a status of 404 and none of the toolbar icons show up. This is running inside an Electron Client (Chromium v66.0.3359.181) on MacOS 10.13.6. I'm loading grapesjs from CDN. If I load it locally then this doesn't happen.
Here is my initialization:
let editor = grapesjs.init({ container: '#canvas', fromElement: true, height: '100%', width: '100%', storageManager: {type: null}, panels: {defaults: []}, blockManager: { appendTo: '#editorControls', blocks: [ { id: 'section', label: '<b>Section</b>', attributes: { class: 'gjs-block-section' }, content: '<section> <h1>This is a Simple Title</h1> <div>This is just a Lorem text: Lorem ipsum dolor sit amit</div> </section>' } ] } });
Answers (3)
cdnjs doesn't store fontawesome in grapesjs (but grapesjs' CSS tries to load them). The solution proposed by @detectedstealth it's for the canvas CSS so it has nothing to do with this editor CSS issue So try to include fontawesome manually on your HTML page or just use https://unpkg.com/grapesjs/dist/css/grapes.min.css
@keithstric for me to get font awesome to work in the editor I needed to add:
canvas: {
styles: ['https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff2?v=4.7.0', ....]
}
To the init({}).
Have you tried that?
Thank you for your response. So, gave that a go, I added:
canvas: { styles: ['https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.14.33/fonts/fontawesome-webfont.woff2?v=4.7.0'] },
to my init options, but still get the same behavior. I tried installing it locally and that got me around this issue, but thought it might help someone else if a solution to this were to be provided
Related Questions and Answers
Continue research with similar issue discussions.
Issue #548
Agnostic protocol on CDN
Just a thought, but you may want to consider loading fontawesome agnostically in your CDN files. Currently getting "Access to Font at 'http...
Issue #1812
[Bug]: 404 when trying to add background image (reproducible in demo)
Visit https://grapesjs.com/demo.html in Chrome IncognitoClick the "Header" elementClick Decorations > BackgroundDelete Layer 2Click Layer 1...
Issue #2044
Npm start to develop on local server didn't work
Did the procedure to start the local server using dev branch as described on README, it worked on the console, but fails on chrome and the...
Issue #1699
[BUG] Link elements are not copyable/deletable
In the editor, if we have link element with some classes, the editor does not allow to copy/delete the element. GrapesJS version: v0.14.50S...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.