Issue #644✓ SolvedOpened December 14, 2017by Geczy17 reactions

Upgrade to Fontawesome 5

快速解答by artf7

Hi Matt, we're already planning to remove Fontawesome from the core and use instead SVGs for icons :)

Read full answer below ↓

Question

From fontawesome 4. Would be a good opportunity to make fa5 a peer-dependency this time as well, so people aren't including it twice

Some icons need to be replaced is the only migration

Answers (3)

👍 Most helpfulartfDecember 14, 2017

Hi Matt, we're already planning to remove Fontawesome from the core and use instead SVGs for icons :)

antman3351April 1, 2020

Hello, I'm currently testing / early development integrating GrapesJs into an existing web application that's using FontAwsome 5.12

(I'm really impressed with GrapesJs especially with how extendable it is 👍👌)

I'm just leaving this as a note as it might help someone else 😊

I found a few issues that are easily fixed by adding an style tag before the editor (I'm lazy, and frontend isn't really my thing 😉).

First, I added grapesjs.init( { cssIcons: null, }); so GrapesJs doesn't load FA4. Then mapped the missing classes:

.gjs-editor-cont .fa {
	font-weight: 400;
}

.fa-square-o:before {
	content: "\f0c8";
}

.fa-trash-o:before {
	content: "\f1f8";
}

.fa-map-o:before {
	content: "\f279";
}

.fa-youtube-play:before {
	content: "\f04b";
}

/* Fix: open close chevrons: FA5 has the tags in different order ?!!? */
.fa-chevron-right:before {
	content: "\f054";
}

.fa-chevron-down:before {
	content: "\f078";
}
GeczyDecember 14, 2017

PS, FA5 uses SVGs ;)

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.