fonts Icon fonts Including a specific symbol on a web page

Example

Consider a down-pointing triangle.

There are several correct ways to display this symbol on a web page.

Method 1 : use decimal HTML entity

HTML :

▼

---

Method 2 : use hexidecimal HTML entity

HTML :

▼

---

Method 3 : use character directly

HTML :

▼

---

Method 4 : use CSS

HTML :

<span class='icon-down'></span>

CSS :

.icon-down:before {
    content: "\25BC";
}

---

Each of these three methods should have the same output. For other symbols, the same three options exist. Some even have a fourth option, allowing you to use a string based reference (eg. ♥ to display ♥).

You can use a reference website like Unicode-table.com to find which icons are supported in UNICODE and which codes they correspond with. For example, you find the values for the down-pointing triangle at http://unicode-table.com/en/25BC/.

Note that these methods are sufficient only for icons that are available by default in every browser. For symbols like ☃,❄,★,☂,☭,⎗ or ⎘, this is far less likely to be the case. While it is possible to provide cross-browser support for other UNICODE symbols, you'll need to obtain an icon font or create one of your own. See Creating your own font for more info on how to do create your own font.