Grapesjs: 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 (https://github.com/artf/grapesjs/issues/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.