Holderjs with Material Icons

mikeatm commented 8 years ago

Im attempting to try out material icons in holdejs text, and i havent been able to get it to work with this: 'holder.js/100x100?font=Material+Icons&text=\e7fb' or with this 'holder.js/100x100?font=Material+Icons&text=%26%23xe7fb' Plus also i have the class="holderjs" on the css link. how does one get an icon font in place of the text?

cliveb commented 8 years ago

On a related note. I can't get the text working (only holder box dimensions). http://socialmrp.com Super to use material icons in place of "the text".

imsky commented 8 years ago

can you please add a jsfiddle?

icon fonts should work, but this may be a weird edge case

mikeatm commented 8 years ago

here: https://jsfiddle.net/czwzoa02/ and here https://jsfiddle.net/czwzoa02/2/

imsky commented 8 years ago

Not sure why JSFiddle doesn't work, but JSBin does: https://jsbin.com/gaxadoxoji

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" class="holderjs">
</head>
<body>
<img data-src="holder.js/200x200?theme=sky&text=&#xE7F2;&size=50&font=Material Icons">
<object data-src="holder.js/200x200?theme=sky&text=mood&size=50&font=Material Icons"></object>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.js"></script>
</body>
</html>

cliveb commented 8 years ago

Copy and paste the JSBin into the JSFiddle and material icons work in place of text.... I can roll now. (thank you both).

mikeatm commented 8 years ago

I had to change this on Holderjs.run( { renderer: 'canvas', object: some_react_ref_here }) seems the default renderer was not working.

cliveb commented 8 years ago

I am not able to use material icons in javascript only in html.

site http://www.socialmrp.com repo https://github.com/cliveb/socialmrpsite

from themify.js

var q = a(p[0], p[1], p[2]), r = b(p, [0, 0, 0], .2), s = a(r[0], r[1], r[2]), t = $("").attr("data-src", "holder.js/" + f + "x" + e + "?bg=" + q + "&fg=" + q + "font=Material+Icons&size=30&auto=true&text=&#xE7F2").css({ top: i + "px", left: k + "px" });

Tried everything every which way, please what have I missed?

imsky commented 8 years ago

@cliveb just a quick glance, but maybe change text=&#xE7F2 to text=?

cliveb commented 8 years ago

Still not working after made change to text=

How to use Bootstrap Glyphicons in Holder.js images points towards key is selecting and passing the unicode character in the correct format for it to be interpreted? http://stackoverflow.com/questions/19250594/how-to-use-bootstrap-glyphicons-in-holder-js-images

I tried to implement the Glyphicon fiddler http://jsfiddle.net/Samyoul/xH4fs/ in JSBin above https://jsbin.com/gaxadoxoji for Material Icon. I can only show placeholder with 140x140 text (material icon not showing).

@mikeatm above changed to Holderjs.run( { renderer: 'canvas', object: some_react_ref_here }) to have material icons working? I am lost trying to implement this?

Holder doc says:

"However, if you need to render a SVG placeholder using an externally loaded font, you have to use the object tag instead of the img tag and add a holderjs class to the appropriate link tags. Here's an example:"

I tried:

var q = a(p[0], p[1], p[2]), r = b(p, [0, 0, 0], .2), s = a(r[0], r[1], r[2]), t = $("").attr(<object "data-src", "holder.js/" + f + "x" + e + "?bg=" + q + "&fg=" + q + "font=Material+Icons&size=30&auto=true&text=">).css({ top: i + "px", left: k + "px" });

No luck.

imsky commented 8 years ago

@cliveb can you please create a JSBin test case with the fonts properly included?

mikeatm commented 8 years ago

@cliveb I meant i changed the default renderer, holder can be initialized with two renderers. It defaults to svg renderer if you do not call Holder.run({}) with the non default renderer which is canvas . The "object" part is simply passing the tag referring to the html element Holder needs to turn to an image.

Holderjs.run( { renderer: 'canvas',  //   can be svg or canvas
            object: some_selector_here //  your css selector,  for <object/>
            images:  some_image_selector  // your css selector, use this if ur using <img/>
             })

Sorry if i caused confusion. i meant to emphasize the default render svg was having trouble, but canvas renderer was working. I saw in one of an earlier issues using icon fonts with holder someone had problems with svg but canvas worked (see this https://github.com/imsky/holder/issues/73#issuecomment-51996358)

cliveb commented 8 years ago

Thank you, I added a new open issue to follow through.

imsky / holder

Holderjs with Material Icons #200