Upgrade to Fontawesome 5
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)
Hi Matt, we're already planning to remove Fontawesome from the core and use instead SVGs for icons :)
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";
}
PS, FA5 uses SVGs ;)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1356
Add "Insert" button to assets manager
How would you go about adding a "Insert image" button to the assets manager modal? At the moment the "Add Image" may be confusing to some w...
Issue #1526
[QUESTION] how to make fullscreen command
Hi, unfortunately I do not find documentation and can't manage to get it understand from code: I know there is a built-in command 'fullscre...
Issue #2026
[Feature request] style manager css functions (for example transform: rotate(90deg)) accepts only one parameter
I would like to provide an option for the css function translate(x,y) but the addProperty parameter functionName accepts only one parameter...
Issue #1410
Drag placeholder Highlighter Postion
@artf When we set some margin from top to the container and want to drag some element inside it then Drag placeholder Highlighter position...
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.