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