Fontawesome and <a> tag?

PatH007 commented 8 years ago

Hi there. It seems there is a problem to show for exemple

<a href="http://www.mywebsiite.com">
<i class="fa fa-home" aria-hidden="true"></i>
</a>

I can't see anything in Bluegriffon Webpage view... Any help?

therealglazou commented 7 years ago

Unfortunately, Fontawesome relies on JS code you have to add to your document and JS code cannot run into a Wysiwyg editor... That's a flaw on Fontawesome's side, not ours 😨 Sorry but there is absolutely nothing we can do about it.

garretwilson commented 7 years ago

@therealglazou , Font Awesome does not depend on JavaScript. I don't know where you got that; it plainly says on the Font Awesome home page:

No JavaScript Required Fewer compatibility concerns because Font Awesome doesn't require JavaScript.

@PatH007 the reason you're not seeing anything could be due to one or both of two problems:

First of all, BlueGriffon has a bug that strips empty <i> elements, as I reported in Bug #16 (even though it was claimed to be fixed in Bug #8). If you want to use Font Awesome, you'll need to put the CSS classes on some non-empty element --- in other words, you can't use the Font Awesome examples directly from the web site, unfortunately.
Secondly BlueGriffon uses the Firefox Gecko engine, which by default doesn't allow icons to be loaded from the local file systems. You'll need to go into Tools > Preferences > Advanced > Configuration Editor in BlueGriffon and set security.fileuri.strict_origin_policy to false. Then you'll see the Font Awesome font icons no problem. They look great on BlueGriffon!

@therealglazou , I suggest two things:

You should mark this bug #23 as a duplicate of #16 (and fix #16, of course).
You should add something to the FAQ explaining how to use security.fileuri.strict_origin_policy in order to see fonts loaded from the local file system.

Cheers!

therealglazou commented 7 years ago

Ah, ok, I used on the links on their website and I ended up with JS code to insert. I think I understand what's going on: Gecko security management forbids font-face links to local files. Investigating. Stay tuned.

garretwilson commented 7 years ago

As you investigate you can read http://stackoverflow.com/a/3704578/421049 and http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/ . You may not can do much about that, and it's easy to change the setting in a new BlueGriffon installation.

The bigger problem is BlueGriffon ripping out empty elements (#16), which applies to more than just Font Awesome and should be fixed.

Thanks for looking into this.

therealglazou commented 7 years ago

I know where the editor core of Gecko removes empty inline elements but I have to check it disabling it does not induce bad side effects...

therealglazou commented 7 years ago

Both the preference and a fix to preserve empty inlines were pushed to the trunk.

PatH007 commented 7 years ago

@garretwilson it seems changing security.fileuri.strict_origin_policy have worked fine, on my computer! Thank you very much!

garretwilson commented 7 years ago

Glad I could help, @PatH007 !

therealglazou / bluegriffon

Fontawesome and <a> tag? #23