Author: hostspectr
Description:
Font Awesome not displayed in IE-browsers, while on other engines, this problem does not exist.
I suspect that you need to fix something in the transfer headers html, but what exactly, I do not know.
Tested only in IE-11, but I think that in older versions of this problem is the place to be.
Version: unspecified
Severity: normal
hostspectr wrote:
"Font Awesome" it is a icons generated using the font and css (official website http://fortawesome.github.io/Font-Awesome/)
Here's an example on my test site -> http://test.firefall-wiki.ru/
Icons placed in id "p-personal" (::before selector in a pt-createaccount & pt-login)
If you open any browser other than IE, we will see the result.
Thanks for the link! I see that pt-createaccount uses and pt-login uses .
So IE does not correctly render those icons which are actually elements in that font. How exactly do you load that font? Does IE load those icons on a simple test page with the same way to load them, which does not involve MediaWiki?
hostspectr wrote:
Ok, so I easily sketched a simple page for the test.
On a CSS: http://test.firefall-wiki.ru/fa-test/
On a Less:http://test.firefall-wiki.ru/fa-test/fa-test-less/
In a MediaWiki "FA" connected in a similar way (Tried and Less as well as CSS).
Example:
In a skins/vektor/scree.less i'm add line @import "less/font-awesome.less";
Fwiw... if you log in to https://en.wikisource.org , go to your Gadgets ~ Compatibility section to enable 'Font-Awesome' support and then visit my font-test-page, you should see both straight and "animated" Font-Awesome icons in action. If so, then read on...
The "problem" with getting these to work -- I Believe -- had more to do with wiki-markup's/parser's/Parsoid's somewhat obsolete "mandate" in today's terms to strip empty tags before final processing/rendering takes place -- in Font Awesome's case, specifically the stripping of 'empty' <i></i> element tags -- than anything to with IE. It worked as described (for me at least) when installed "outside" of a MediaWiki-influenced environment & IE.
The normal FA recommended syntax for generating images/icons/glyphs won't work under wiki-whatever...
The only way I could get these empty tags to render on their own without pleading to the development gods was to add a null id="' attribute to the normal recommended syntax...
Other than that, the only other time I saw the default syntax work was when the tags where deeply nested/wrapped in other elements in certain cases; never consistently compared to the id approach however.
Hope that helped.
Closing this task as it was a support request about how to customize the skin to allow to use font awesome in IE, not an issue with MediaWiki software.
If you bump on this issue, you'll find solutions on the Font Awesome documentation.