0

I would like to display a 'key' (from a keychain) next to certain key words in an HTML/JavaScript app I'm creating, but I do not want to make any HTTP requests to load an image. How can I do this reliably across all major browsers?

Is there a UNICODE value that works? (I couldn't find one)

Is there a Webdings Font that works? (They don't usually work in Opera and Firefox)

Is there a way to create an image in JS using a base64 image source provided by a String from the JavaScript?

Thanks!

John Fowler
  • 3,173
  • 3
  • 18
  • 31
  • This question may help regarding your creating-the-image-with-javascript question: http://stackoverflow.com/questions/1095102/how-do-i-load-binary-image-data-using-javascript-and-xmlhttprequest – Zlatko Nov 20 '12 at 13:39
  • related: http://stackoverflow.com/questions/1384380/is-there-a-unicode-glyph-that-looks-like-a-key-icon – leonbloy Nov 20 '12 at 13:46

2 Answers2

2

You can use base64 data in a image's scr property:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

You can then scan through the text with javascript, and add image tags where needed.
(Or wrap the text in a span, and set the image as the span's background.)

To actually create a image in the DOM:

var img=document.createElement("img");
    img.setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38G    IAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
    img.setAttribute('alt', 'Red dot');
    img.setAttribute('height', '10px');
    img.setAttribute('width', '10px');
document.body.appendChild(img);

Edit:
You can use this tool to encode a image to Base64.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
1

⚿ 0x26BF looks like a good match. I don't know they put the key inside a square, but anyway... Of course the issue is whether the user's font would have the codepoint...

enter image description here

dda
  • 6,030
  • 2
  • 25
  • 34