8

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?

kix
  • 3,290
  • 27
  • 39
Samuel Hawksby-Robinson
  • 2,652
  • 4
  • 24
  • 25

3 Answers3

12

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.

Samuel Hawksby-Robinson
  • 2,652
  • 4
  • 24
  • 25
  • 2
    This is excellent, I'll look into making this a default part of Holder. – imsky Oct 15 '13 at 15:38
  • Mr @imsky himself, a pleasure. I'm pleased you like it. I'm looking to get the images to be anti-aliased on some images there are some very noticeable pixelation on the edges of the characters. [Here's the fiddle](http://jsfiddle.net/Samyoul/xH4fs/) – Samuel Hawksby-Robinson Oct 16 '13 at 16:48
  • 1
    That comes up as a "rectangle" (missing character) for me, I think you'll need to host the example yourself somewhere. – imsky Oct 18 '13 at 01:34
  • @Samyoul, that solution doesn't work. Can you give us another example that works? – wpsidi Jul 18 '14 at 15:04
2

I've been searching on the net but did't find any solution. As imsky said, that comes up as a "rectangle" (missing character). So I tried to create my own solution but this is not creating image with holder.js

<div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
       <span class="big-icon glyphicon glyphicon-glass"></span>
   </a>
</div>

and then on css style:

<style>
.big-icon{
   margin:10px;
   font-size:100px;
}
.thumbnail{
   text-align:center;
}
</style>

Here's the result:
enter image description here


But I'm still looking solution for: How to use Bootstrap Glyphicons in Holder.js images. Any help will be appreciated.

Thanks

wpsidi
  • 119
  • 5
  • Holder's SVG renderer needs extra work to display webfonts. The 2.4 release will have full webfont support, see this issue: https://github.com/imsky/holder/issues/73 – imsky Aug 01 '14 at 15:55
-1

But why are you so confused when solution is already available. Just remove all holder.js related changes and come back to basics and just put these line at end of the document and see the change......

 $(function() {
        $('img').each(function() {
            var img = $(this);
            img.error(function() {
                img.replaceWith('<span class="glyphicon glyphicon-user" style=" background-color: #eee;  font-size: 100pt"></span>');
            });
        });
    });

if need more help can mail me to ranjeet1985@gmail.com

Ranjeet Rana
  • 65
  • 5