Ok, so this didn't peak the interest of anyone. But I solved the issue for myself, thought it good etiquette to share my solution with the community.
I had to do two things. After I realised holder.js parses the JavaScript canvas draw into a png image file, the issue was less of a "holder.js" issue and more of a pure JS and web font / fontface issue.
First thing: I had to explicitly tell the system that the Glyphicons were fonts and what I was referring to them as. I did this with the following CSS:
@font-face {
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
src: local('Glyphicons Halflings'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
}
Second: Once the browser knew the name, location and type of font I was using I could start to use it to pass unicode characters to a JS canvas object. Holder.js has a settings Var which holds an array of "themes", I added the following custom theme to the array:
"blueGlyph": {
background: "#3a87ad",
foreground: "#ffffff",
size: 128,
font:"Glyphicons Halflings"
}
Third: Now all I had to do was pass the unicode character to the JS script and it would produce icon images on the fly. The HTML looked as follows:
<img src="data:image/png;base64," data-src="holder.js/140x140/text:/blueGlyph">
Which produced the following dynamically produced image:
The key to selecting and passing the unicode character in the correct format for it to be interpreted and drawn was to pass the unicode character using the HTML method. ie &#x*{UNICODE HERE}*; . Or " ;" as per the above example.