HTML Icons, charsets,
symbols and dingbats.

1. UTF-8 characters and symbols.

The HTML 5 specification advises users to have the following line in the head of their HTML-documents:

Defining Charset in Head section of webpages.


                  
                    <meta charset="UTF-8">

This defines the charset to be used as UTF-8.

Now what characters and symbols are there inside this UTF-8 characterset?
You can find the UTF-8 characters in a really huuuuuuge list: Complete Character List for UTF-8 on Fileformat.info. It has about 120 pages or so !
This list contains complete lettersets for all kind of languages, like our Latin alphabet, but also Greek, Cyrillic, Arabic and many many more. You get 1024 characters on 1 page, so you have to scroll down to the "more..." button many times until you reach the symbols, emoticons and icons you might be looking for. Unless you know the name of the symbol, which you can type in the search box.
When you have found the character you are looking for you can press it and it will give you a page with all information about that character or symbol that you might need.

**Information for the Floral Heart symbol from utf-8.**

Each character/symbol in this UTF-8 list has a unique name.

If you want an easier way of finding what you need, there are 2 other places you can visit:

W3schools:
HTML Character Sets on W3schools.
This is the main page. There is a menu on the left that points to you will see lots of separate pages with all kind of HTML5 characters and dingbats.
There is a menu on the left of that page that shows them grouped together on different pages.

There are hundreds of symbols on those pages:
letterlike symbols, currency symbols, arrows in many variations, math operators, box drawings, block elements, geomatric shapes, all kind af miscellanious symbols, many many dingbats. Too much to mention. Hearts, lines in all kind of shapes. And a very, very, long list of emoticons (emoji's)
HTML by Toptal Designers
HTML symbol codes, entities, ASCII characters and Unicode hexadecimal values.
This is a comprehensive reference website for finding HTML symbol codes and entities, ASCII characters and Unicode hexadecimal values to use in your web design.
It has a top-menu that separates the symbols in groups. Clicking a symbol shows you more information about it. It even shows how to use that symbol in plain HTML or inside the CSS content tag.

So I suggest you have a look there if you want to use a simple dingbat, for instance inside a HR-line, as I have done.
But you could also use them as icons in your menu's or such.

If you want to know how to use them, either goto W3schools, each symbol or dingbat there, has a "Try it" link where you can see how to use that symbol.
Or,
Go to that Toptal Designers page and click the symbol to get that information.

Example of a "Try it" page on W3Schools:

**How to use HTML5 characters and dingbats.**

Question :

Is there a font that contains all Unicode characters ?

Short answer: No there is not. The OpenType specification only gives room for 65.536 glyphs at the most. Unicode V13 can hold 143.859 ! ! character places. So that is technically impossible.
Long answer can be found in an excellent explanation on Stackoverflow as an answer to:
Why isn't there a font that contains all Unicode glyphs?

Of course you can use icons, as in the next chapter, but if you only want something easy and simple, you can use these HTML characters and dingbats defined in UTF-8. There are links in the last chapter of this article, that point to these glyphs.

2. Icons and Icon fonts.

Of course we could also use small icon SVG's in stead of the symbols in the previous chapter. Those SVG's are more flexible and styleable. An example of a font with svg's is the Bootstrap Icon font.

If you want old fashioned icons you can use a font like FontAwesome or the Bootstrap 5 Icon font. Or you can use Material Icons from Google. And there are more when you start searching.

In each case you have to tell the browser what font you will be using by adding a line in the head of your webpage:

Linking the fonts to your webpage in the head of your page.


                  
                    <head>

                    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

                    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

                    </head>

Depending on what font you use, choose the appropriate stylesheet link line(s). In each case a stylesheet is added to your page, which gives you extra classes to be able to use the font. Make sure to check if the version of the font has not changed since the time I wrote this, in that case the above lines might be changed a bit. So go to the font itself to find the latest version.

There are also the wellknown windows fonts: Wingdings and Webdings. But the above mentioned fonts are more modern to use.

3. How to use Characters and Dingbats inside CSS and HTML?

Some examples of using the UTF-8 Characters and Dingbats:

Replace bullet for li 1:
The bullet is replaced by a Unicode (UTF-8) Baseball character.
- Some text.
Replace bullet for li 2:
The bullet is replaced by a leaf character from Fontawesome, called "pagelines".
- Some text.

CSS code for the examples above:


                  
                    ul.nomarker { /* remove original marker bullet */
                      list-style-type: none;
                    }

                    li.bullet1:before {
                      content: '\26BE';  /* baseball U+26BE */
                      margin-left: -20px;
                      margin-right: 10px;
                    }

                    li.bullet2:before {
                        font-family: 'FontAwesome';
                        content: '\f18c'; /* pagelines, which is a leaf */
                        margin:0 5px 0 -15px;
                        color: green;
                    }

HTML code for the examples above:


                  
                    <ul class="nomarker">
                      <li>
                        <b>Replace bullet for li 1:</b>
                        <br>
                        The bullet is replaced by a Baseball character.
                        <br>
                        <ul class="nomarker">
                          <li class="bullet1">
                            Some text.
                          </li>
                        </ul>

                      </li>
                      <li>
                        <b>Replace bullet for li 2:</b>
                        <br>
                        The bullet is replaced by a leaf character from Fontawesome,
                        called "pagelines".
                        <br>
                        <ul class="nomarker">
                          <li class="bullet2">
                            Some text.
                          </li>
                        </ul>

                      </li>
                    </ul>

You can find some more explanation about how to use FontAwesome icons in a nav at: Stackoverflow.

TIP:

You can also check my article about styling HR-lines, that contains many examples too.

4. Links.

Some usefull links for finding and using Dingbats.

Entity Conversion Calculator. To convert numerics or pasted Dingbats. Entity Conversion Calculator.

Entity Conversion Calculator.

This is an entity conversion calculator. You can convert a numeric value into the corresponding dingbat, CSS and hex value. Or you can type or paste a dingbat and convert it to this values.
Graphemica. Search for a dingbat by its official name. Graphemica.
Here you can search for a Dingbat if you know its official name, or part of it.
Font character map on the page of Martin Stoeckli: Font character map.

Font character map on the page of Martin Stoeckli.

This screenshot shows you can click on a character which will give you more information.

Font character map on the page of Martin Stoeckli.

Part of the grouped dingbats.
HTML by Toptal Designers: HTML by Toptal Designers.

HTML by Toptal Designers

Part of the long list of characters and dingbats.

HTML by Toptal Designers the floral heart symbol.

You get more information when you click on 1 dingbat or character.
List of XML and HTML character entity references on wikipedia. XML and HTML character entity references.
Also a very long list of character entity references. These are the "names" by which some of the UTF-8 characters can be identified. (Not all utf-8 characters have an entity reference)
List of Glyphs on CSS-tricks page. List of Glyphs.
Also a very long list of glyphs. With the entity names and, if possible, an example of use inside a content entity.
Dingbats and Wingding information on Wikipedia.
Zapf Dingbats font.
Dingbat information.
Wingdings, Wingdings 2, Wingdings 3 font.

HTML Icons, charsets, symbols and dingbats.