Skip to main content

Fixing FontAwesome for Windows 10

I ran into an issue with FontAwesome a few months back, where a NoCache header was being injected at the server and FA was broken for any partial refresh. I convinced the admin to reverse that setting and all was well until last week... We had some users who were not getting any icons to appear. Ever. We tracked it down to a new Windows 10 setting for IE11 which disallows untrusted fonts. Since we do not set security protocols for our users, and there is no chance of ever convincing those admins to change this policy that they explicitly turned on, I had to find a new solution. I did some searching and it turned out to not be too difficult. First, here is the original implementation.
The theme:
<control>
<name>Icon.Search</name>
<property mode="override">
<name>tagName</name>
<value>i</value>
</property>
<property mode="concat">
<name>styleClass</name>
<value>fa fa-search</value>
</property>
</control>
The xsp tag:
<xp:text themeId="Icon.Search" />

Web fonts are out, so I looked for a solution to convert FontAwesome into SVG graphics. It turns out, there is one. Here is the guide I used. This provides you with an SVG image, a CSS class, and a JS file (required for IE). I added those files to my application, and to my theme. Then I modified each icon in the theme as follows:
<control>
<name>Icon.Search</name>
<property mode="override">
<name>tagName</name>
<value>svg</value>
</property>
<property mode="override">
<name>escape</name>
<value>#{false}</value>
</property>
<property mode="concat">
<name>styleClass</name>
<value>icon icon-search</value>
</property>
<property mode="override">
<name>value</name>
<value>&lt;use xlink:href="fonts/symbol-defs.svg#icon-search"&gt; &lt;/use&gt;</value>
</property>
</control>
That essentially solved the issue. The icon alignment can be slightly different as a graphic than as a font, and the appearance is slightly inconsistent. I tried experimenting with the SVG shape-rendering tag without success, but I could have just been doing something wrong or perhaps once the graphic is drawn it won't redraw when the SVG markup changes. Both of those issues are fairly minor in scope.

Comments

Popular posts from this blog

Pass data between XPages and existing LS scripts

I'm working on modernizing a fairly hefty application with a lot of existing script libraries which we want to leverage within the XPages environment. Here is a technique that works very well. First, create an in-memory document in SSJS. We can set any input values needed for the back end. Then we pass that document to a LS Agent which can work it's magic using the values set in SSJS and use the same document to return values back to the XPage. Here is how it works in detail:

Quick tip: Convert a number to String in EL

I just had a need to do this and a Google search didn't immediately turn up a solution. So I thought for a couple of minutes and came up with this: value="0#{numberVar}" This takes advantage of the way Java auto-converts objects to strings when doing a concatenation. So if your number is 13, Java EL turns this into new String("0"+13), which becomes "013". You can then strip off the leading zero or just parse the string back into a number.

Project in Review - Part 3: What didn't work

Of course, not everything was an unmitigated success. I tried many things that didn't work out. Much of which I've removed and forgotten about, but a few things remain - either scarred into my psyche or woven too deeply to fix. What didn't work Storing my entire configuration in application.properties Using properties files is great. It let me get configuration out of a profile document and into something much easier to edit - particularly configuration that users will never see or maintain (and thus there is no need for an interface for). But I took it too far. The paths to the other databases are there, and that's good. But view aliases are also there, and that was a mistake. I already have a ViewDefinition enum that describes each view and all the information I need to know about it. I could have set view names there, but instead I'm reading them from the application config. I can change where a view is pointing without having to go into my code. Except of co