Skip to main content

Fixing FontAwesome for Windows 10

By
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.
Labels:

Comments

Post a Comment

Popular posts from this blog

XPages Application Framework (Part 1?)

By
Note: I changed projects and priorities after my last POI article, resulting in a long hiatus. I anticipate using that framework on my current project and will likely refine and complete my related article series. For the past several months, I've been fortunate enough to lead a project overhaul from traditional Domino Webapp to XPages. I had a few goals in mind, but the top three were integrating Bootstrap, embracing MVC principles, and eliminating all SSJS . I imagine the motivation for Bootstrap integration is self-explanatory. There is an OpenNTF project out there called Bootstrap4XPages. I didn't use that for a number of reasons - the main being a policy in the current environment. But you may ask yourself (if you didn't follow that link), why so much hatred for SSJS? I have a litany of reasons. It impacts readability of the XPage source; it hurts maintainability when logic is scattered across dozens of XPages, custom controls, and script libraries; it mixes log...
Post a Comment
Read more

Killing SSJS - Passing a parameter using Expression Language - Part 2

By
In part 1, I showed how you can expand the DataObject implementation to allow you to pass a parameter to a method and return the result. It's not a perfectly elegant solution, and it has some limitations, but it's a very solid technique and not at all difficult to implement or maintain. But I kept running into roadblocks. What if I have to compute part of the expression? What if I have to get a value based on another parameterized getter? You can't compute part of an EL expression in your EL. So after some research and experimentation, I created the GetMap. This isn't a new concept - it was developed for JSF 1.1 (which is what XPages is built on) but the rest of the world has moved on to JSF 2.0 and so some of these older techniques can be a little tricky to unearth since this hasn't been an issue in the JSF world for years.
Post a Comment
Read more

Rows per page selection: Part 2

By
I was asked to create a control that would allow users to select the number of rows per page in a view/repeat control (the application uses both). It seemed simple at first, but I ran into a few issues that I thought I'd share the solutions to. Problem 2: When the page refreshed, the combobox value always reverted back to the default It turns out that the Integer value stored in the viewScope doesn't get run through the converter back to a string before being compared to options. I needed a way to calculate the option values so that they would be Integers. This is also not the first time I've run into issues where I need a value to be of a different type, and I see questions like this on StackOverflow from time to time. I attempted a few minor things before I realized I needed to break out my old stand-by, the GetMap . The GetMap is just a fake Map implementation that takes the key and transforms it or uses it to look up some other value. In this case, we are doing the f...
Post a Comment
Read more