Consistent Font Display with Bootstrap Glyphicon and Thymeleaf

I noticed that the Navbar Glyphicon menu font in NixMash Spring wasn't consistent between Chrome and Firefox. Here is what they should look like in Chrome with a Ubuntu, Arial font-family base.

Here's what they looked like in Firefox where the fonts take on a Georgian flair.

The original Thymeleaf HTML looked like this:

<li th:class="${activeTab == 'contacts'}? 'active' : null">
<a href="/contacts" th:href="@{/contacts}">
<span class="glyphicon glyphicon-th-list" th:text="#{navbar.contacts}">[Contacts]</span>
</a>
</li>

See what I did there? I applied the Thymeleaf text for the Navbar menulink to the Glyphicon span. That worked fine in Chrome, but as you saw, not in Firefox.

If you assign the th:text Thymeleaf text to the Hyperlink you'll cancel out the Glyphicon effect, so here's the right way to do it for consistent text font across browsers. We're adding a Thymeleaf <span /> and removing the tag with th:remove=”tag”.

<li th:class="${activeTab == 'contacts'} ? 'active' : null">
<a href="/contacts" th:href="@{/contacts}">
<span class="glyphicon glyphicon-th-list"></span>
<span th:text="#{navbar.contacts}" th:remove="tag">[Contacts]</span>
</a>
</li>

The resulting HTML is nice and clean as well.

Posted August 24, 2015 11:36 AM EDT

More Like This Post