How to use Bootstrap Glyphicons in Holder.js images


Tags: javascript,css,twitter-bootstrap,glyphicons,holder.js

Problem :

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?



Solution :

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:

enter image description here

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.


    CSS Howto..

    How to create a form that flys out onto the screen using javascript/css

    How do I make this background repeat horizontally the entire way across the screen?

    How to auto width a form element with CSS?

    How to handle an id tag with '.' in CSS

    CSS: How to set minimum and maximum height according to inside?

    How to use CSS selectors [closed]

    How to determine the exact 'font-family' CSS value of an uploaded TrueType font?

    How to override the width property in css [closed]

    How do i hook media queries to screen resolution?

    How to break a line after some certain width in css

    How to achieve chamfered CSS Border Corners rather than rounded corners?

    how to get fixed table columns width

    How to change css styles of a jQuery plugin?

    How to load an onScroll background image before user scrolls to them?

    css - how to fix first td in table on top if the second td has multiline?

    How to access and modify imported .css files in WordPress style.css file?

    HTML CSS - How to put button at the center of my page

    How to load a dynamic view css file using requireJs & Backbone

    How to design “overflowing” border lines of css
    ?

    How to apply CSS to document.write()?

    How to correctly align left in CSS?

    how to replace a link name text

    How to use CSS attribute selector for an SVG element with namespaced attribute href?

    Cakephp how to remove underline on links

    Ascii character codes shown as text in browser [duplicate]

    How to create a lightbox like this [closed]

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    CSS3 - How to “restore” ::-webkit-scrollbar property to the default scroll bar

    Meteor: how to style useraccounts

    How to change the content of a span using css hover?