14

I am making an application, and I want to add a "HOME" button.

After much struggling with various icon libraries, I stumbled upon this site,

http://graphemica.com/%F0%9F%8F%A0, with this

A unicode symbol, which is more akin to a letter than an image.

I pasted it into my HTML, and it just workedTM.

All this seems a little too easy, though. Are unicode symbols widely supported? Is there some kind of problem with them that leads people to use icon libraries instead?

Community
  • 1
  • 1
Code Whisperer
  • 22,959
  • 20
  • 67
  • 85
  • Chrome has up until recent years notoriously had issues with emoji support, though I believe things have improved. – BoltClock Apr 27 '18 at 10:40
  • 2
    One potential problem is that you have no control over the design of the icon displayed. It will look different depending on what platform your user is using. On mac, I see a detailed, coloured representation of a house. On Windows I see a very simple, single colour icon. The linked site shows a different preview of a flat, single colour icon. Other platforms may vary. – Turnip Apr 27 '18 at 10:43
  • @Turnip: I also noticed it, but the URL and in this page I have the colour version, and on page, for the few 1/10 seconds I see the colours. Looking the inspector, it seems that font family changes, and so we get the monochrome version. – Giacomo Catenazzi Apr 27 '18 at 11:18

4 Answers4

4

It depends on what do you mean for "safe".

User should have the fonts, so you must include the relative font, and in various formats: there is not yet a format recognized by most used web-browsers.

Additionally, font with multiple colours are not fully understood by various systems, so you should care about what do you expect from users (click, select, copy, etc.).

Additionally, every fonts has own design, so between different fonts (so browsers and operating system) things can look differently. We do not have yet a "Helvetica 'Home'", a "Times New Roman 'Home'".

All this points, could be solved by using a web font, with monochrome glyphs (but it could be huge, if it includes all Unicode code points (+ usual combinations).

It seems that various recent browser crashes if there are many different glyphs, but usually it should not be a problem.

I also recommend aria stuffs so that you page could be used also by e.g. readers (and braille screen).

Note: on the plus side, the few people that use text browser can better see the HOME (not the case in case of an image), if somebody still care about this use case.

Remy Lebeau
  • 555,201
  • 31
  • 458
  • 770
Giacomo Catenazzi
  • 8,519
  • 2
  • 24
  • 32
  • Actually if the effort is made to strip out unused glyphs from a font, it is most efficient to simply load the front from the website itself. Therefore -- given that the browser loads the font -- you have security and consistency when displaying to the end user – Martin Apr 27 '18 at 20:34
  • 1
    @Martin: yeah, the example in the question is a sort of "layout/style" use of unicode, so copdepoint well know and strippable. But if unicode come from a database (and maybe provided by user) stripping the font could not be feasible. Note also that now emoticons (and fonts) allow combining characters, which make stripping more "interesting". – Giacomo Catenazzi Apr 27 '18 at 20:46
3

I think using unicode is a good practice for development. Beacause 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.

The only problem is - code can be defficult to read or understand. I think it is not easy to understand that (&#12796 8;🏠) printing home icon.

Even the 8 bit PNGs are faster then the font icons.

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.

If you are developing a website using only simple shapes, you can use unicode UTF-8 symbols as replacement for font icons.

I think : Almost every developer use libraries for icons because of readablility of code, Easy to use and get more options.

Safe or Not I can not say whether it is safe or not.

Because Unicode contains such a large number of characters and incorporates the varied writing systems of the world, incorrect usage can expose programs or systems to possible security attacks. This is especially important as more and more products are internationalized. This document describes some of the security considerations that programmers, system analysts, standards developers, and users should take into account, and provides specific recommendations to reduce the risk of problems. Read about UNICODE SECURITY CONSIDERATIONS

Arpit Yadav
  • 516
  • 8
  • 21
3

Some things you want to make sure you’re doing:

  • Save your HTML file as UTF-8. In fact, save all text files as UTF-8 unless there’s some reason you can’t.
  • Put the line <meta charset="utf-8" /> near the top of your HTML file.
  • Make sure your server isn’t misconfigured to tell all browsers that webpages are in the wrong encoding.
  • If, somehow, it is and you can’t fix it, fall back on &entities;.
  • Specify a font stack for your emoji in CSS with a set of fonts that cover nearly every system, perhaps including Apple Color Emoji, Noto Color Emoji, Segoe UI Emoji and Twemoji.
  • If a free font such as Noto or Symbola contains the emoji you use, you can package it as a WOFF to be sure it will always display the way you want. (As of 2018, Tor browser does not show most emoji correctly by default, but mainstream browsers do.)
Davislor
  • 14,674
  • 2
  • 34
  • 49
0

Here are few precautions to be taken while doing that, I did some research and found this to be more helpful for your question. Also I dont know how you can do but credits go to Mr.GOY

Displaying unicode symbols in HTML

karthik
  • 150
  • 9