Using faster Unicode symbols instead of Font Awesome for speed.

red speed

Save the Internet from WordPress speed abuse.

Updated: September 2017

3 minute read

To be read in modern browsers, HTML/CSS files must be UTF-8 – an encoding scheme developed in 1992. WordPress uses utf8mb4 and is 100% backwards compatible with UTF-8. So what? What does that trivia have to do with speeding up mobile websites?

You can customize your site icons by setting a Unicode font-size, color and text shadows, just like regular CSS text. The name is derived from Unicode (or Universal Coded Character Set) Transformation Format – 8-bit. UTF-8 is the character encoding accounting for 88.4% of all Web pages in January 2017.

When we think of pretty font icons like arrows, hearts and stars, we think of trendy font icon services like Font Awesome or Fontello. Font Awesome is a unicode UTF-8 font referred to as a glyph icon library. You can use it as decoration, logos, or navigation. Because these are webfonts, they cause extra page weight and HTTP requests. Font Awesome and other icon fonts slow down page load times. The frequently add 75k to 100k extra page weight and HTTP requests. That slows things down.

If you are developing a website using only simple shapes, you can use unicode UTF-8 symbols as replacement for font icons. The unicodes are essentially part of your operating system so you don’t need any special library or plugin and you treat them like regular text. For example, to change the icon size, simply change the font-size values as usual.

Detoxify the Web. Make your site fast.

Above is an example of a colorized Unicode biohazard symbol.
Unicode Character 'BIOHAZARD SIGN' (U+2623)

We use a solid Unicode star in our PagePipe logo.
Unicode Character 'BLACK STAR' (U+2605)

The trouble with image files as icons.

Using raster-images files to create a menu icon – especially 8-bit PNGs – are faster loading than Font Awesome or Genericon icon fonts that are usually included with many free and paid themes. Image icons can be lightweight but still slow down your site with another HTTP request and time for the image to load. With images you don’t have flexibility over the color and scaling. SVG vector image alternatives are still not faster than plain-text (Unicode characters). Unicode doesn’t require additional HTTP requests and can be made to scale nicely.

The Unicode character for menu icons (“navicons”).

For the basic, three-line navigation menu icon, there are two Unicode characters:
One is the Chinese glyph (the trigram for heaven). It looks just like the “hamburger” navigation menu icon. It’s available as the following HTML entity:

&#9776; <!– Results in ☰ –>

The unicode character for ‘IDENTICAL TO’ (U+2261), is more bulletproof than  the TRIGRAM FOR HEAVEN’ (U+2630) on different operating systems.

The mathematical operator is used in more fonts than the iChing symbol.

Most recommend using the UNICODE character UNICODE U+2261 (8801), ≡ IDENTICAL TO as illustrated below rather than the UNICODE U+2630 (9776) ☰ TRIGRAM FOR HEAVEN which seems to have font support issues on some older Android devices.

≡ Menu

Use ≡ (x2261) shown above, instead as it has better support (96 percent).

Is there Unicode glyph Symbol to represent “Search”

There is U+1F50D LEFT-POINTING MAGNIFYING GLASS (????) and U+1F50E RIGHT-POINTING MAGNIFYING GLASS (????).

You should use (in HTML) &#1F50D; or &#1F50E;

Or use “Telephone recorder” U+2315: ⌕? It resembles a magnifying glass and seem is included in standard fonts, where U+1F50D and U+1F50E aren’t always.

Or use the ⚲ symbol (encoded as &#9906; or &#x26B2;)

HTML Entity (decimal)     &#128269;

Unicode character information
Left-pointing magnifying glass

Displayed on your computer as: ????

Unicode name: Left-pointing magnifying glass
Alternative names:

Magnifying glass, left-pointing

Codepoint (hexadecimal): 0x1F50D
Codepoint (decimal): 128269

 

http://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use/

Unicodes are Icon-like, Arrows, Special, Currency, Weather, Pointers, Card Suits, Chess, Math, Fractions, and Roman Numerals.

UNICODE REFERENCES

http://www.copypastecharacter.com/

 

http://jrgraphix.net/r/Unicode/2600-26FF

Symbols gone amok:
http://unicodeemoticons.com/cool_text_icons_and_pictures.htm

http://dongerlist.com/

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"Your site is the only one I've found that seems to take a serious approach to making a WordPress site fast. Everyone talks about the Yoast plugin, fast hosting, CloudFlare, but I haven't read about time to first byte, image compression or similar subjects elsewhere." medium.com/@nathanpen Texas, USA

by - Nathan Pennington