Font Awesome 5 Needs 'far' or 'fas' classes, not 'fa'

[coneybeare]

I'm submitting a...

• Bug report
• Feature request

Reproduction steps

1. install EasyMDE on a site that already uses FontAwesome, and thus doesn't pull the loaded one
2. Look at toolbar's missing icons

Version information

Browser type and version:
EasyMDE version: 2.4.1

Font Awesome 5 has changed the way they do their classing from Font Awesome 4. No longer can you simply use fa, rather you need to use fas, far, etc... It appears that your autoloaded version actually uses FA 4.7.0, does not behave this way, so when using EasyMDE on a site that already uses FontAwesome 5, the icons do not show.

It seems to me that the solution is to simply add far or fas to the corresponding icon classes, as it won't affect people who still use FA4, and the extra fa won't affect people using FA5.

[Ionaru]

Hi, thank you for your bug report.

I've tested with both the CSS and SVG&JS versions of FontAwesome 5 free and the FA5 icons render fine for me.

Can you provide an example that shows the issue?

[coneybeare]

I'm not sure what is accidentally going right in your tests, but the fa prefix is clearly deprecated in FA5, as per the official FontAwesome site. Have you tried using their FontAwesome 5 can instead of the v4.7.1 bootstrap one you are currently using?

Personally, I use the official font awesome sass gem to build font-awesome from scratch within a Rails deployment. I was hoping the official docs would be enough for you to fix this, but if not, I guess I could throw together a mini rails app you can setup and run if need be.

[coneybeare]

Ok, I put together a local rails project and installed FontAwesome-sass. EasyMDE did not properly detect it, and instead loaded the bootstrapcdn's 4.7 version. The icons did work however, leading me to discover that the problem I was seeing above stems from a security header blocking font-src from allowing the bootstrapcdn's 4.7 version of FA.

So this issue can be closed, but it opens two new questions...

1. Why isn't it detecting the FontAwesome I already have installed?
2. Why are you still loading a V4 version of FA instead of V5 from their official CDN?

[Ionaru]

1. That's was an oversight of me when I made the editor FA5 compatible.
2. Because the editor still uses FA4 by default and I did not want to change too much of the editor at the time.

But to possibly solve your FA4 issue: you can prevent the editor from downloading FA4 by setting the autoDownloadFontAwesome option to false.

[philgyford]

Should the README be updated so that the SimpleMDE fork section says "FontAwesome 4 compatibility" rather than "FontAwesome 5 compatibility"?

Until I found this issue I was confused as to why FontAwesome 5 styles didn't work, and then why v4.7 was being downloaded, when the README says EasyMDE uses v5.

[Ionaru]

The README is correct, the editor has compatibility with FontAwesome 5 (Five), that was the initial reason for the fork. However the default is still FontAwesome 4.

Look at https://easy-markdown-editor.tk/ for an example of the editor running using FontAwesome 5.
Keep in mind that you will need to provide the FontAwesome 5 script yourself, for example https://use.fontawesome.com/releases/v5.15.4/js/all.js.

[philgyford]

Thank you for the clarification.