Issue #1474💬 AnsweredOpened October 2, 2018by keithstric1 reactions

FontAwesome request fails with 404

快速解答by artf1

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

Read full answer below ↓

Question

This is for version 0.14.33. After initializing the canvas and selecting an element 3 network requests are generated to the following:

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)

detectedstealthOctober 2, 2018

@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?

keithstricOctober 3, 2018

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.