CODEWITHSUNDEEP
htmlcssunicodecross-browser
Omar Juvera
Omar Juvera

Reputation: 12287

How to properly code UNICODE FONT ICONS so they render on all browsers

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

Upvotes: 9

Views: 1347

Answers (4)

Mike
Mike

Reputation: 799

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 :)

Upvotes: 3

crc442
crc442

Reputation: 627

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.

Upvotes: 1

Vinod Tigadi
Vinod Tigadi

Reputation: 859

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)

Upvotes: -1

cytsunny
cytsunny

Reputation: 5030

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

Upvotes: 2

Related Questions