字体jquery ---

You don’t need icons! Here are 100+ unicode symbols that you can use

Danny Markov December 3rd, 2014

Ever needed to add an icon to your design, but you didn’t want to include images or an entire icon font like Font Awesome into your page? We’ve got good news for you – there is a vast library of available icons and glyphs already in your browser. It is called Unicode, and it is a standard which assigns a unique identifier for an ever expanding number (currently over 110 000) of characters, symbols and icons.

This doesn’t mean that you have a choice of a hundred thousand icons, though. It is up to the browser to render them, and it uses the fonts which are installed on the system to do so. In this article, we’ve collected a number of symbols that are available across Windows, Linux, OS X, Android and iOS. You can use them in your web designs today!

Tip: There is a good article which explains everything you need to know about character encodings and unicode, which we recommend for every software developer to read.

How to use these icons

The icons given in the tables below, are regular characters, which you can copy and paste as if they are letters of text. But if the encoding used to save your HTML/CSS files is not UTF-8 they might not show up. This is why we’ve provided an HTML escape code, which will always work. Here is what you need to do to use these icons:

1. Find an icon that you like. We’ve provided small and large previews.
2. Copy the code.
3. Paste it in your HTML as regular text. In your CSS, you can use it as the value of the content property. In JS, PHP and other programming languages, you can use it as text in strings.
4. You can customize the icons by setting a font-size, color and text shadows, just like regular text.

Icon-like

Arrows

Special

Currency

Weather

Pointers

Card Suits

Chess

Maths

Fractions

Roman Numerals

A few notes

There are some rendering differences between these symbols across operating symbols. This is caused by the different font families that are used. Also, iOS and Android replace some Unicode characters with emoji, so be sure to test there to make sure that this doesn’t happen and the icons show as intended. Have fun coding! :)