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






评论前必须登录!
注册