How to use Bootstrap Glyphicons in Holder.js images

Question

I'm building the front-end of a project with Bootstrap and I'm looking to use the Glyphicons found in 3.0.0 instead of usual text. How would I do this?

Those of you familiar with Holder.js will know that the JS basically creates place-holder images on the client side. This has useful bandwidth saving applications, as you only need to download the weight of the script (about 4Kb) and let the client's machine generate the images.

I want to combine the Glyphicons with holder.js, to produce large high-quality icons on the fly.

Calling a Glyphicon with Bootstrap is straight forward as follows:

<span class="glyphicon glyphicon-user"></span>

Calling a dynamic image with the text of "Hello World" with holder.js is done as follows:

<img data-src="holder.js/200x200/text:Hello World">

I understand that the Bootstrap CSS defines the Glyphicon class as a font, and then uses a pseudo before element to call the specific character defined by a secondary class. See below:

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.glyphicon-user:before {
    content: "\e008";
}

How do I go about easily passing a specific glyphicon character in the correct font to holder.js, to output an image icon?

Answer 1

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:&#xe093;/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 "&#xe093 ;" as per the above example.

Here's the fiddle if you want to mess around with it.