Using faster Unicode symbols for decorative icons.

WordPress Mobile Speed

Updated


There are no affiliate links on PagePipe.

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 percent of all Web pages.

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. This 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 site identity.
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 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
December 2024

 

PagePipe Site Tuning Services for Speed

Instead of band-aid approaches, we drill down to the root cause of your slow site. This is origin optimization. Also known as site tuning. To do this, we analyze site components:

  • Hosting
  • Theme
  • Plugins
  • Scripts and third-party services.
  • Images and media library.
  • We minimize globally loading plugin effects.

Find out more details about Site TuningGet Speed!