前端Unicode字符图标 原文链接地址：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141225979.html
如果你的页面设计中需要一些图标，你不必使用图片，也不必使用像 Font Awesome 这样的字体图标，我们要告诉你的是，在你的浏览器中已经有一个庞大的图标和符号库-Unicode。它是一个为每一个数字、字符、符号和图标分配的唯一标识（目前超过11000个）。
这并不意味着你拥有无数的图标，它是通过按钮在系统中的字体，通过浏览器来渲染它们，才出现图标效果。在这个教程中，我们将分享一些在Windows, Linux, OS X, Android 和 iOS中可用的unicode字符图标。从今天开始，你可以在你的设计中使用它们。这里有一篇关于使用unicode和字符编码的好文章，我们建议每一位开发者都阅读一下这篇文章。
如何使用Unicode字符图标
下面以表格的形式给出了一些图标，都是一些常规字符，你可以像文本一样复制和粘贴它们。但是，如果你的HTML/CSS文件不是UTF-8编码，它们可能会是乱码。为此，我们提供了HTML转义字符，它在任何编码下都能正常工作。下面是你使用图标时需要做的事情：
- 1、找到你喜欢的图标，我们提供了大和小两种图标。
- 2、复制代码(code)。
- 3、像文本一样粘贴在你的HTML文件中。在CSS文件中，你可以当做属性的值来使用它。在JS和PHP等文件中，你可以像字符串一样使用它。
- 4、你可以自定义图标的字体大小、颜色、文本阴影等属性。
Icon-like
| 名称 |
预览 |
code |
| Smiley |
☺ |
☺ |
☺ |
| Hot Springs |
♨ |
♨ |
♨ |
| 8-Ball |
➑ |
➑ |
➑ |
| White Star |
☆ |
☆ |
☆ |
| Black Star |
★ |
★ |
★ |
| White Heart |
♡ |
♡ |
♡ |
| Black Heart |
❤ |
❤ |
❤ |
| Airplane |
✈ |
✈ |
✈ |
| Black Scissors |
✂ |
✂ |
✂ |
| White Scissors |
✄ |
✄ |
✄ |
| Crown |
♕ |
♕ |
♕ |
| Cross |
✝ |
✝ |
✝ |
| Black-White Circle |
◑ |
◑ |
◑ |
| Eight Note |
♪ |
♪ |
♪ |
| Beamed Eighth Notes |
♫ |
♫ |
♫ |
| Four Balloon-Spoked Asterisk |
✣ |
✣ |
✣ |
| Circled White Star |
✪ |
✪ |
✪ |
| White Star |
✰ |
✰ |
✰ |
| White Four Pointed Star |
✧ |
✧ |
✧ |
| Black Four Pointed Star |
✦ |
✦ |
✦ |
| Ballot Box Check |
☑ |
☑ |
☑ |
| Check Mark |
✔ |
✔ |
✔ |
| Cross Mark |
✘ |
✘ |
✘ |
| Pencil |
✎ |
✎ |
✎ |
| Writing Hand |
✍ |
✍ |
✍ |
| Female |
♀ |
♀ |
♀ |
| Male |
♂ |
♂ |
♂ |
| Black Telephone |
☎ |
☎ |
☎ |
| White Telephone |
☏ |
☏ |
☏ |
| Envelope |
✉ |
✉ |
✉ |
| Telephone Location |
✆ |
✆ |
✆ |
Arrows
| 名称 |
预览 |
code |
| Leftwards Arrow |
← |
← |
← |
| Rightwards Arrow |
→ |
→ |
→ |
| Upwards Arrow |
↑ |
↑ |
↑ |
| Downwards Arrow |
↓ |
↓ |
↓ |
| Left Right Arrow |
↔ |
↔ |
↔ |
| Up Down Arrow |
↕ |
↕ |
↕ |
| Right And Left Arrows |
⇄ |
⇄ |
⇄ |
| Up And Down Arrows |
⇅ |
⇅ |
⇅ |
| Down-Left 90deg Arrow |
↲ |
↲ |
↲ |
| Down-Right 90deg Arrow |
↳ |
↳ |
↳ |
| Up-Left 90deg Arrow |
↰ |
↰ |
↰ |
| Up-Right 90deg Arrow |
↱ |
↱ |
↱ |
| Leftwards Arrow To Bar |
⇤ |
⇤ |
⇤ |
| Rightwards Arrow To Bar |
⇥ |
⇥ |
⇥ |
| Anticlockwise Semicircle Arrow |
↶ |
↶ |
↶ |
| Clockwise Semicircle Arrow |
↷ |
↷ |
↷ |
| Anticlockwise Circle Arrow |
↺ |
↺ |
↺ |
| Clockwise Circle Arrow |
↻ |
↻ |
↻ |
| Wide-Headed Rightwards Arrow |
➔ |
➔ |
➔ |
| Downwards Zigzag Arrow |
↯ |
↯ |
↯ |
| North West Arrow |
↖ |
↖ |
↖ |
| Heavy South East Arrow |
➘ |
➘ |
➘ |
| Heavy Rightwards Arrow |
➙ |
➙ |
➙ |
| Heavy North East Arrow |
➚ |
➚ |
➚ |
| Dashed Rightwards Arrow |
➟ |
➟ |
➟ |
| Dotted Leftwards Arrow |
⇠ |
⇠ |
⇠ |
| Black Rightwards Arrowhead |
➤ |
➤ |
➤ |
| Leftwards White Arrow |
⇦ |
⇦ |
⇦ |
| Rightwards White Arrow |
⇨ |
⇨ |
⇨ |
| Left Angle Quotation Mark |
« |
« |
« |
| Right Angle Quotation Mark |
» |
» |
» |
| Right Black Pointer |
► |
► |
► |
| Left Black Pointer |
◀ |
◀ |
◀ |
| Up Black Pointer |
▲ |
▲ |
▲ |
| Down Black Pointer |
▼ |
▼ |
▼ |
| Right White Pointer |
▷ |
▷ |
▷ |
| Left White Pointer |
◁ |
◁ |
◁ |
| Up White Pointer |
△ |
△ |
△ |
| Down White Pointer |
▽ |
▽ |
▽ |
| Bow Arrow |
➴ |
➴ |
➴ |
Special
| 名称 |
预览 |
code |
| Numero |
№ |
№ |
№ |
| Copyright |
© |
© |
© |
| Registered |
® |
® |
® |
| Trademark |
™ |
™ |
™ |
| Estimated |
℮ |
℮ |
℮ |
| Bullet |
• |
• |
• |
| Middle Dot |
· |
· |
· |
Currency
| 名称 |
预览 |
code |
| Euro |
€ |
€ |
€ |
| Pound |
£ |
£ |
£ |
| Lira |
₤ |
₤ |
₤ |
| Yen |
¥ |
¥ |
¥ |
| Cent |
¢ |
¢ |
¢ |
| Currency |
¤ |
¤ |
¤ |
Weather
| 名称 |
预览 |
code |
| Degree |
° |
° |
° |
| Small Sun |
☀ |
☀ |
☀ |
| Big Sun |
☼ |
☼ |
☼ |
| Cloud |
☁ |
☁ |
☁ |
| Snowflake 1 |
❆ |
❆ |
❆ |
| Snowflake 2 |
❅ |
❅ |
❅ |
| Snowflake 3 |
❄ |
❄ |
❄ |
Pointers
| 名称 |
预览 |
code |
| Pointer Left Black |
☚ |
☚ |
☚ |
| Pointer Right Black |
☛ |
☛ |
☛ |
| Pointer Left White |
☜ |
☜ |
☜ |
| Pointer Up White |
☝ |
☝ |
☝ |
| Pointer Right White |
☞ |
☞ |
☞ |
| Pointer Down White |
☟ |
☟ |
☟ |
Card Suits
| 名称 |
预览 |
code |
| Spades Black |
♠ |
♠ |
♠ |
| Hearts Black |
♥ |
♥ |
♥ |
| Diamonds Black |
♦ |
♦ |
♦ |
| Clubs Black |
♣ |
♣ |
♣ |
| Spades White |
♤ |
♤ |
♤ |
| Hearts White |
♡ |
♡ |
♡ |
| Diamonds White |
♢ |
♢ |
♢ |
| Clubs White |
♧ |
♧ |
♧ |
Chess
| 名称 |
预览 |
code |
| King White |
♔ |
♔ |
♔ |
| Queen White |
♕ |
♕ |
♕ |
| Rook White |
♖ |
♖ |
♖ |
| Bishop White |
♗ |
♗ |
♗ |
| Knight White |
♘ |
♘ |
♘ |
| Pawn White |
♙ |
♙ |
♙ |
| King Black |
♚ |
♚ |
♚ |
| Queen Black |
♛ |
♛ |
♛ |
| Rook Black |
♜ |
♜ |
♜ |
| Bishop Black |
♝ |
♝ |
♝ |
| Knight Black |
♞ |
♞ |
♞ |
| Pawn Black |
♟ |
♟ |
♟ |
Maths
| 名称 |
预览 |
code |
| Infinity |
∞ |
∞ |
∞ |
| Plus Minus |
± |
± |
± |
| Less-Than Or Equal To |
≤ |
≤ |
≤ |
| More-Than Or Equal To |
≥ |
≥ |
≥ |
| Not Equal To |
≠ |
≠ |
≠ |
| Division |
÷ |
÷ |
÷ |
| Multiplication x |
× |
× |
× |
| Heavy Multiplication x |
✖ |
✖ |
✖ |
| Superscript One |
¹ |
¹ |
¹ |
| Superscript Two |
² |
² |
² |
| Superscript Three |
³ |
³ |
³ |
| Circled Plus |
⊕ |
⊕ |
⊕ |
| Circled Multiplication |
⊗ |
⊗ |
⊗ |
| Logical AND |
∧ |
∧ |
∧ |
| Logical OR |
∨ |
∨ |
∨ |
| Delta |
∆ |
∆ |
∆ |
| Pie |
∏ |
∏ |
∏ |
| Sigma (SUM) |
∑ |
∑ |
∑ |
| Omega |
Ω |
Ω |
Ω |
| Empty Set |
∅ |
∅ |
∅ |
| Angle |
∠ |
∠ |
∠ |
| Parallel |
∥ |
∥ |
∥ |
| Perpendicular |
⊥ |
⊥ |
⊥ |
| Almost Equal To |
≈ |
≈ |
≈ |
| Triangle |
△ |
△ |
△ |
| Circle |
○ |
○ |
○ |
| Square |
□ |
□ |
□ |
Fractions
| 名称 |
预览 |
code |
| One Quarter (1/4) |
¼ |
¼ |
¼ |
| One Half (1/2) |
½ |
½ |
½ |
| Three Quarters (3/4) |
¾ |
¾ |
¾ |
| One Third (1/3) |
⅓ |
⅓ |
⅓ |
| Two Thirds (2/3) |
⅔ |
⅔ |
⅔ |
| One Eight (1/8) |
⅛ |
⅛ |
⅛ |
| Three Eights (3/8) |
⅜ |
⅜ |
⅜ |
| Five Eights (5/8) |
⅝ |
⅝ |
⅝ |
| Seven Eights (7/8) |
⅞ |
⅞ |
⅞ |
Roman Numerals
| 名称 |
预览 |
code |
| Roman Numeral One |
Ⅰ |
Ⅰ |
Ⅰ |
| Roman Numeral Two |
Ⅱ |
Ⅱ |
Ⅱ |
| Roman Numeral Three |
Ⅲ |
Ⅲ |
Ⅲ |
| Roman Numeral Four |
Ⅳ |
Ⅳ |
Ⅳ |
| Roman Numeral Five |
Ⅴ |
Ⅴ |
Ⅴ |
| Roman Numeral Six |
Ⅵ |
Ⅵ |
Ⅵ |
| Roman Numeral Seven |
Ⅶ |
Ⅶ |
Ⅶ |
| Roman Numeral Eight |
Ⅷ |
Ⅷ |
Ⅷ |
| Roman Numeral Nine |
Ⅸ |
Ⅸ |
Ⅸ |
| Roman Numeral Ten |
Ⅹ |
Ⅹ |
Ⅹ |
| Roman Numeral Eleven |
Ⅺ |
Ⅺ |
Ⅺ |
| Roman Numeral Twelve |
Ⅻ |
Ⅻ |
Ⅻ |
小提示：在使用不同的字体时，渲染出来的图标可能会有所不同，因此，iOS and Android将一些unicode字符转换为表情符号。在你使用这些unicode字符之前，最好测试一下它们，确定不会出现在不同浏览器表现不同的情况出现。
9
0
已为社区贡献2条内容
所有评论(0)