There are several correct ways to display the right triangle.
Method 1: use a decimal HTML object
HTML:
&
Method 2: use an object with a hexadecimal HTML image
HTML:
&
Method 3: use the character directly
HTML:
▶
Method 4: use CSS
HTML:
<span class='icon-right'></span>
CSS:
.icon-right:before { content: "\25B6"; }
Each of these three methods should have the same output. For other characters, the same three options exist. Some even have a fourth option, allowing you to use a line-based link (e.g. ♥ to display ♥).
You can use a reference site, such as Unicode-table.com , to find which icons are supported in UNICODE and which codes they correspond to. For example, you will find the values for the descending triangle at http://unicode-table.com/en/25BC/ .
Please note that these methods are sufficient only for icons that are available by default in each browser. For characters such as ☃, ❄, ★, ☂, ☭, ⎗ or ⎘, this is much less likely. Although you can provide cross-browser support for other UNICODE characters, the procedure is a bit more complicated.
If you want to learn how to add support for the less common UNICODE characters, see Create a web interface with additional characters for the multilingual Unicode language . information on how to do this.
Background Images
A completely different strategy is to use background images instead of fonts. For optimal performance, it is best to embed the image in your CSS file using basic encoding, as indicated, for example. @ weasel5i2 and @Obsidian. I would recommend using SVG rather than GIF, however, this is better for both performance and sharpness of your characters.
This following code is a base64 version for and SVG icon 
:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=
When to use background images or fonts
In many cases, using SVG-based background images and icon fonts is pretty much equivalent to performance and flexibility. To decide what to choose, consider the following differences:
SVG images
- They can have several colors.
- They can embed their own CSS and / or be in the style of an HTML document
- They can be downloaded as a separate file embedded in CSS and embedded in HTML
- Each character is represented by XML code or base64 code. You cannot use a character directly in a code editor or use an HTML object
- Several uses of the same character mean duplicating a character when XML is embedded in HTML. Duplication is not required when embedding a file in CSS or loading it as a separate file
- You cannot use
color , font-size , line-height , background-color or other font styling rules to change the appearance of your icon, but you can refer to different components of the icon as separate shapes. - You need some knowledge about SVG and / or base64 encoding
- Limited support or lack of support in older versions of IE
Font icons
- An icon can have only one fill color, one background color, etc.
- The icon can be embedded in CSS or HTML. In HTML, you can use a symbol directly or use an HTML object to represent it.
- Some characters may be displayed without using webfont. Most characters cannot.
- Multiple uses of the same character mean duplicating a character when your character is embedded in HTML. Duplication is not required when embedding a file in CSS.
- You can use
color , font-size , line-height , background-color or other font-size related styling rules to change the display of your icon - You do not need special technical knowledge.
- Support in all major browsers, including older versions of IE
Personally, I would recommend using background images only when you need multiple colors, and that color cannot be achieved using color , background-color and other CSS color-related rules for fonts.
The main advantage of using SVG images is that you can give your character a different style. If you embed your SVG XML code in an HTML document, this is very similar to the HTML style. This will lead, however, to a webpage that uses both HTML and SVG tags, which can significantly reduce the readability of the webpage. It also adds extra bloat if the character is repeated across multiple pages, and you need to consider that older versions of IE do not have or are limited to SVG support.