9

I want to add Unicode icons to a website, and only unicode -No custom font files.

I know I can do something like:

[class^=icon-facebook]:before { content: "\00066"; } [class^=icon-twitter]:before { content: "\01F426"; } [class^=icon-phone]:before { content: "\01F4DE"; } [class^=icon-fax]:before { content: "\01F4E0"; } [class^=icon-email]:before { content: "\01F4E7"; } [class^=icon-link]:before { content: "\01F517"; } [class^=icon-pay]:before { content: "\01F4B8"; } [class^=icon-dollar]:before { content: "\01F4B5"; } [class^=icon-yen]:before { content: "\01F4B4"; } [class^=icon-save]:before { content: "\01F4B0"; }

jsFiddle

However, I am reading that some browsers won't render the "icon" (Unicode character) properly. Sometimes browsers would display an empty square instead of the Unicode character.

How can I code my CSS to prevent that from happening?

  1. No custom fonts
  2. No images
Improve this question
13
  • 3
    Use images instead of unicode characters...? Commented May 5, 2015 at 20:27
  • Take a look at this question: stackoverflow.com/questions/22380974/… Commented May 5, 2015 at 20:30
  • You want to prevent the square from appearing? Even if the browser doesn't support the character you chose? Commented May 5, 2015 at 20:36
  • 5
    If you don't want to use a font that supports the character and don't want to use an image of the character, then what you're asking for is not possible. Commented May 6, 2015 at 2:25
  • 3
    What @一二三 said: you apparently want a browser to display a particular glyph when there is no copy of that glyph on the local computer and you are not willing to give it one (by image, SVG or embedded font). This is quite obviously impossible. Commented May 9, 2015 at 9:58

4 Answers 4

Reset to default
3
+25

i understand that you dont want to make an "extra" call for a font download or image download. if you insist on keeping it all in the CSS you could try Base64 for example:

<style type="text/css"> div.image { width: 14px; height: 14px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGMjdBMjVGOTU2NTAxMUUyOUFBN0EzOUYwOEVBMkQ1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGMjdBMjVGQTU2NTAxMUUyOUFBN0EzOUYwOEVBMkQ1MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkYyN0EyNUY3NTY1MDExRTI5QUE3QTM5RjA4RUEyRDUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkYyN0EyNUY4NTY1MDExRTI5QUE3QTM5RjA4RUEyRDUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AND5IAAAAHBJREFUeNpi/P//P4OJiQkDGmAG4r9AzATl/4Oy/zHgAWfOnIFrOAjE/5HwHyj9F4r/I9G48CEGJBdQA4AMZWCBcuypZSo1XUhbAw8SCHBi8EFkA/9TwXH/kCPFYeRFygEqRMoBmuQURlDhQE0AEGAA1LJE38CAHLYAAAAASUVORK5CYII='); } </style>

This will place the hamburger menu icon. Here is a working example: Demo

It will surely look exactly the same in all browser because it is an image and not a font.

you can make any png image into this here: PNG to Base64

Good luck :)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

However, I am reading that some browsers won't render the "icon" (Unicode character) properly. Sometimes browsers would display an empty square instead of the Unicode character.

How can I code my CSS to prevent that from happening?

I am not sure if you are meaning that you want to prevent rendering the empty square only or you want the font to be the same for all browser.

If you mean you want the font to be the same for all browser, and don't want to include any font file or image file, all you can do is choose a font that is supported by all browser and test if they are shown correctly.

Here is a tool that you may try for testing your icon on every possible browser: https://spoon.net/browsers

Or if you just want to know if the character is correctly shown and in case not you want to handle the error by another way, here is a way that you may find useful. https://stackoverflow.com/a/1912045/1273587

Improve this answer

Comments

1

If a browser supports Unicode at all, it will support all character codes. But not all fonts will have character glyphs for all Unicode characters.

So, to get support for the characters that you want, you would need to use a font (in your case, the web safe ones) that has those characters, in formats used by all different operating systems.

Improve this answer

Comments

-1

till today there is no single web-browser is built which will comply all the standards and meet all our technical and design requirements.

Every browser has it's own capabilities and limitations. That's why, we developers try to understand those limitations and come out with alternate solutions so that our applications work as seamlessly and as perfect as possible in all the browsers and in all versions. Writing the cross-browser compatible code is an skill/art.

The day when all browsers gets standardised and follow the same rule, then the life of webdevelopers(specially HTML CSS Developers) will be very easy and may not have much work/challenges too !! ;-)

What you are trying to achieve is very optimistic solution but in reality it is just not possible. It's hard truth but you have to digest it and should focus on other ways as how to achieve your goals with the available alternate solutions (Which you already know)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.