Friday, October 28, 2016

AtoZ CSS Quick Tip: How to Use Unicode Characters

U is for Unicode Characters

Unicode characters can be really handy for adding little symbols and icons to your HTML or in your CSS via pseudo elements' content property. Here are a handful of tips for using unicode characters.

[author_more]

Set the character set in your CSS

If you want to use unicode characters in your CSS file, ensure to set the character set for your CSS in addition to setting the charset meta tag in your HTML document.

[code language="html"]
<!-- in your HTML <head> -->
<meta charset="utf-8"/>
[/code]

[code language="css"]
/* in your CSS at the top of the file*/
@charset 'utf-8';
[/code]

Use the Trigram for Heaven symbol as a simple hamburger icon

When needing to knock together a quick demo site or a video screencast for a responsive tutorial, I often use the love-it-or-hate-it hamburger icon for a mobile menu. There are lots of icon solutions out there and there are many non-raster approaches to the hamburger icon but often the quickest and easiest for me is to use the unicode character called "The Trigram for Heaven" which looks like this: .

.

Continue reading %AtoZ CSS Quick Tip: How to Use Unicode Characters%


by Guy Routledge via SitePoint

No comments:

Post a Comment