如果你的页面设计中需要一些图标,你不必使用图片,也不必使用像 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字符之前,最好测试一下它们,确定不会出现在不同浏览器表现不同的情况出现。