How to use Bootstrap glyph fonts in Holder.js images

Question

I am creating a front-end project using Bootstrap, and I am looking to use the Glyphicons found in version 3.0. 0 instead of plain text. How can I do it?

Those familiar with Holder.js will know that JS basically creates client-side place owner images. This has useful applications to save bandwidth, since you only need to load the script weight (about 4 KB) and let the client machine generate images.

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

Glyphicon is called using Bootstrap as follows:

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

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

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

I understand that Bootstrap CSS defines the Glyphicon class as a font, and then uses a pseudo-element before invoking the specific character defined by the 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 can I easily transfer a specific glyphicon character to the correct font in the holder.js file to display the image icon?

Answer 1

Good, so it did not arouse anyone's interest. But I solved the problem for myself, thought it was good etiquette to share my solution with the community.

I had to do two things. After I realized that holder.js parses drawing a JavaScript canvas into a png image file, the problem was less from the "holder.js" problem and more from a pure problem with JS and web font / font.

First: I had to explicitly tell the system that glyphics are fonts and what I mean. 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 has recognized the name, location, and type of font that I used, I could start using it to pass Unicode characters to the JS canvas object. Holder.js has Var settings that contain 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 create icon images on the fly. HTML looked like this:

 <img src="data:image/png;base64," data-src="holder.js/140x140/text:&#xe093;/blueGlyph"> 

The result is the following dynamically created image:

The key to selecting and transmitting the Unicode character in the correct format for interpreting and drawing it was to pass the Unicode character using the HTML method. those. & # x * {UNICODE HERE} * ;, Or "& # xe093;" in accordance with the above example.

Here's a fiddle if you want to chat with her.

Answer 2

I searched on the net but did not find any solution. As imsky said, it looks like a "rectangle" (missing character). So I tried to create my own solution, but this does not create an image using 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 in css style:

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

Here is the result:

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

thanks

Answer 3

But why are you so confused when the solution is already available. Just delete all the changes related to the .js owner and go back to the basics and just put this line at the 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 you need additional help write me at [e-mail]