Runtime optimized resources and custom Bootstrap themes

Friday, April 4, 2014 11:43 PM UTC

I finally came across a solution on how to workaround the current issue with Bootstrap (v3.x) Glyphicons when setting your XPages application to use runtime optimized Javascript and CSS resources. If you don't know what I mean then just try it for yourself: use a custom Bootstrap theme (with or without a combination with Bootstrap4XPages plugin) and use some icons: they will suck!

My solution depends on the usage of the BS4XP plugin while using a custom theme, e.g. from Bootswatch. Download the theme CSS file, open it with your prefered editor (I love Brackets!) and search for "glyphicons". Delete every the definition that has this term in the classname of the @font-face completely. The icons will still appear as they are loaded from the plugin resources, so don't bother. Implement your theme (add it to your own theme or use it as page resource) and: here you are! No crappy icons but the default ones in combination with your custom theme!

(I updated this post due to two other posts regarding @font-face declarations that were posted today on 4/7/2014 by Brad and Paul)

You can see a live demo of that achievement when you look at my bookmarks collection. This app uses BS4XP and the theme "Cosmo" from the Bootswatch page.





Latest comments to this post

Oliver Busse wrote on 05.04.2014, 15:44

Yes Mark, you are right. Sounds great, thank you!

 Link to this comment
Mark Leusink wrote on 05.04.2014, 13:39

Hi Oliver,

The issue you had was probably cause by double/ not correctly loading of the (glyphicon) font files. In the next release of Bootstrap4XPages I'll add a base XPage theme for Bootstrap that loads all the required resources except the standard Bootstrap CSS file. That way you can add your own custom themes and won't have this issue.

Mark

 Link to this comment

Leave a comment right here