Upgrade to Fontawesome 5

[Geczy]

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

[artf]

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

[Geczy]

Great!!

[Geczy]

PS, FA5 uses SVGs ;)

[Geczy]

Can this be re-opened since FA5 uses svgs? Really need this

[Geczy]

https://fontawesome.com/how-to-use/upgrading-from-4

[Geczy]

Just a note that the newsletter plugin will need upgrading too to fa5

[Geczy]

Still very important, any update?

[artf]

Sorry Matt, busy period :/
Currently, it's already a goal replying to some issue in few days

[TimNZ]

I came to ask the same thing.

I'm using the raw fontawesome SVG.

https://github.com/FortAwesome/Font-Awesome/tree/master/advanced-options/raw-svg

  cardRequestBlock && bm.add(type, {
    label: `
      <svg class="gjs-block-svg" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
        <g fill-rule="evenodd">
          <path d="M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48zM54.1 80h467.8c3.3 0 6 2.7 6 6v42H48.1V86c0-3.3 2.7-6 6-6zm467.8 352H54.1c-3.3 0-6-2.7-6-6V256h479.8v170c0 3.3-2.7 6-6 6zM192 332v40c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v40c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z"/>
        </g>
      </svg>
      <div class="gjs-block-label">Card Request</div>
    `,
    content,
    category: 'Stripe',
    ...cardRequestBlock
  });

[erickpece]

Just wanted to check in to see if there's a timeline on this? Working on a site that has FA5, but it causes conflicts while trying to integrate GJS.

[TimNZ]

I can understand the delay - switching to FA5 is not an insta decision as FA5 separates icons out and requires checking and maybe updating class

[chapterjason]

In favor of the roadmap (#74) to Get rid of font-awesome and start using <svg>s for icons I would close this issue.

[chiqui3d]

@artf Any news Font Awesome 5?

[artf]

@chiqui3d nope.
I'd really appreciate a PR. It's about removing font awesome and replace with <svg>s (probably not placed directly inside templates but imported from utils/icons.js, in that way I can re-use them easily) where it was used (default buttons, style manager, blocks, layers).

[chiqui3d]

Ok I'll try to create a PR, thanks for everything.

[sceee]

I am facing the same issue - after reading severeal issues I am still not sure if there is a possibility to use GrapesJS with Fontawesome 4 (which it requires) by delivering Fontawesome 4 from the own website AND use Fontawesome 5 on the same page for other stuff.

Did anyone manage to get the GrapesJS editor working on a website that uses Fontawesome 5?

[artf]

Hi guys, I'd like to propose a temporary and quick solution to the problem of having FA in the core.
I posted a few months ago this comment to this PR where I explain (the middle paragraph) my idea of having icons in the core, the idea, I still believe, is the right way for the GrapesJS core.
Honestly, I think having icons is too much opinable to be in a generic-purpose framework so probably a better place for them could be Presets (GrapesJS plugins which use the core API to build the UI interface like panels, buttons, icons, etc.).
About my quick temporary solution, what do you think about removing completely the FA dependency and add a new option in GrapesJS like cssIcons which would expect a URL of icons to load asynchronously on editor load, eg.

grapesjs.init({
	// ...
	// This will be the default to avoid breaking current layout
	cssIcons: 'https://cdn..../font-awesome/4.7.0/css/font-awesome.min.css',
	// cssIcons: null, // this will avoid loading css icons
})

[chiqui3d]

Hello @artf , I didn't even remember this, after a year I have tried again to use the editor, in my spare time I try to get a project where the editor appears, but I never get it out, well in short I haven't had time to do the PR that's reason I contributed a little in opencollective. Well although it is not the best option that you propose, it is an option that could work temporarily. But the ideal is that grapesjs has its own icons made with IconMoon.

But yes, the temporary solution is appreciated.

Thanks

[artf]

Removed FA from dependecies https://github.com/artf/grapesjs/releases/tag/v0.15.9

[bradhinch]

I am using grapesjs v0.15.10 and still getting a conflict between the version used

[antman3351]

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

[Ericky14]

Anyone looking at this still? I still get issues running on a project with fontawesome 5, some icons are missing.

[tuongnguyendev]

@Ericky14 => Fix temp for fontawesome 5,
Step 1:
grapesjs.init( { cssIcons: null, });
Step 2: Add css on your page builder

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

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

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

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

.fa-chevron-right:before {
  content: ""\f054"";
}

.fa-chevron-down:before {
  content: ""\f078"";
}
.fa-arrows:before {
    content: ""\f0b2"";
}

[bmcorum]

@antman3351, @osteamhcm, or @artf I am trying to integrate GrapesJS into an existing application that uses FA5 and noticed none of the click events work. I tried the solutions above by setting cssIcons: null which does prevent FA4 from loading. Am I possibly missing another step? I noticed if I comment out my import of FA5 (including their JS file) that GrapesJS click events work. I suspect that when Backbone is registering the click event listeners it is happening before FA5 converts the DOM tags into SVGs. Any insight or help would be greatly appreciated.

[bmcorum]

@antman3351, @osteamhcm, or @artf a few more details. Really the click events that do not seem to work are for the style manager, settings, layer manager and blocks (three items above the right panel). The style manager is defaulted as the selected panel, but I cannot click the any of the other buttons in the top panel bar (gjs-pn-buttons). I included a screenshot of how the DOM is being updated by FA5 to convert the spans to svgs.

[antman3351]

I'm using fontawsome as webfonts not SVG. As you said, the issue is probably when fontawsome's JS swaps the <span> for <svg> the listener is lost.

P.S I'm still on version 0.16.3 (as the later versions textable elements are broken) donno if the version change has any effect for this issue.

[bmcorum]

@antman3351, first off thank you for the quick reply. Second (major facepalm moment), using the fontawesome JS for converting to SVGs breaks GrapesJS. I switched my build to using the CSS and webfonts instead of the JS and everything appears to be working properly now.

[ilamarche]

@bmcorum Hello, how did you switch your build to use CSS and webfonts instead of the JS ? I have try many things but fontawesome-i2svg is always call.