Unicode 中包含了各种符号,我们可以作为图标来使用。这里整理一下常用的一些符号。
一、拉丁字母补全(Latin-1 Supplement):U+0080 至 U+00FF
Unicode 编号 | 字符描述 | 字符形状 | HTML 编码 |
U+00A4 | CURRENCY SIGN | ¤ | ¤ |
U+00AB | LEFT-POINTING DOUBLE ANGLE QUOTATION MARK | « | « |
U+00B1 | PLUS-MINUS SIGN | ± | ± |
U+00BB | RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK | » | » |
U+00D7 | MULTIPLICATION SIGN | × | × |
U+00F7 | DIVISION SIGN | ÷ | ÷ |
二、箭头字符(Arrows):U+2190 至 U+21FF
Unicode 编号 | 字符描述 | 字符形状 | HTML 编码 |
U+2190 | LEFTWARDS ARROW | ← | ← |
U+2191 | UPWARDS ARROW | ↑ | ↑ |
U+2192 | RIGHTWARDS ARROW | → | → |
U+2193 | DOWNWARDS ARROW | ↓ | ↓ |
U+2194 | LEFT RIGHT ARROW | ↔ | ↔ |
U+2195 | UP DOWN ARROW | ↕ | ↕ |
U+2196 | NORTH WEST ARROW | ↖ | ↖ |
U+2197 | NORTH EAST ARROW | ↗ | ↗ |
U+2198 | SOUTH EAST ARROW | ↘ | ↘ |
U+2199 | SOUTH WEST ARROW | ↙ | ↙ |
U+21B5 | DOWNWARDS ARROW WITH CORNER LEFTWARDS | ↵ | ↵ |
U+21BA | ANTICLOCKWISE OPEN CIRCLE ARROW | ↺ | ↺ |
U+21BB | CLOCKWISE OPEN CIRCLE ARROW | ↻ | ↻ |
U+21D0 | LEFTWARDS DOUBLE ARROW | ⇐ | ⇐ |
U+21D1 | UPWARDS DOUBLE ARROW | ⇑ | ⇑ |
U+21D2 | RIGHTWARDS DOUBLE ARROW | ⇒ | ⇒ |
U+21D3 | DOWNWARDS DOUBLE ARROW | ⇓ | ⇓ |
U+21D4 | LEFT RIGHT DOUBLE ARROW | ⇔ | ⇔ |
U+21D5 | UP DOWN DOUBLE ARROW | ⇕ | ⇕ |
三、几何形状字符(Geometric Shapes):U+25A0 至 U+25FF
Unicode 编号 | 字符描述 | 字符形状 | HTML 编码 |
U+25A0 | BLACK SQUARE | ■ | ■ |
U+25A1 | WHITE SQUARE | □ | □ |
U+25AA | BLACK SMALL SQUARE | ▪ | ▪ |
U+25AB | WHITE SMALL SQUARE | ▫ | ▫ |
U+25AE | BLACK VERTICAL RECTANGLE | ▮ | ▮ |
U+25AF | WHITE VERTICAL RECTANGLE | ▯ | ▯ |
U+25B2 | BLACK UP-POINTING TRIANGLE | ▲ | ▲ |
U+25B3 | WHITE UP-POINTING TRIANGLE | △ | △ |
U+25B4 | BLACK UP-POINTING SMALL TRIANGLE | ▴ | ▴ |
U+25B5 | WHITE UP-POINTING SMALL TRIANGLE | ▵ | ▵ |
U+25B6 | BLACK RIGHT-POINTING TRIANGLE | ▶ | ▶ |
U+25B7 | WHITE RIGHT-POINTING TRIANGLE | ▷ | ▷ |
U+25B8 | BLACK RIGHT-POINTING SMALL TRIANGLE | ▸ | ▸ |
U+25B9 | WHITE RIGHT-POINTING SMALL TRIANGLE | ▹ | ▹ |
U+25BC | BLACK DOWN-POINTING TRIANGLE | ▼ | ▼ |
U+25BD | WHITE DOWN-POINTING TRIANGLE | ▽ | ▽ |
U+25BE | BLACK DOWN-POINTING SMALL TRIANGLE | ▾ | ▾ |
U+25BF | WHITE DOWN-POINTING SMALL TRIANGLE | ▿ | ▿ |
U+25C0 | BLACK LEFT-POINTING TRIANGLE | ◀ | ◀ |
U+25C1 | WHITE LEFT-POINTING TRIANGLE | ◁ | ◁ |
U+25C2 | BLACK LEFT-POINTING SMALL TRIANGLE | ◂ | ◂ |
U+25C3 | WHITE LEFT-POINTING SMALL TRIANGLE | ◃ | ◃ |
U+25CB | WHITE CIRCLE | ○ | ○ |
U+25CF | BLACK CIRCLE | ● | ● |
U+25D0 | CIRCLE WITH LEFT HALF BLACK | ◐ | ◐ |
U+25D1 | CIRCLE WITH RIGHT HALF BLACK | ◑ | ◑ |
U+25D2 | CIRCLE WITH LOWER HALF BLACK | ◒ | ◒ |
U+25D3 | CIRCLE WITH UPPER HALF BLACK | ◓ | ◓ |
U+25D4 | CIRCLE WITH UPPER RIGHT QUADRANT BLACK | ◔ | ◔ |
U+25D5 | CIRCLE WITH ALL BUT UPPER LEFT QUADRANT BLACK | ◕ | ◕ |
U+25E7 | SQUARE WITH LEFT HALF BLACK | ◧ | ◧ |
U+25E8 | SQUARE WITH RIGHT HALF BLACK | ◨ | ◨ |
U+25E9 | SQUARE WITH UPPER LEFT DIAGONAL HALF BLACK | ◩ | ◩ |
U+25EA | SQUARE WITH LOWER RIGHT DIAGONAL HALF BLACK | ◪ | ◪ |
U+25EB | WHITE SQUARE WITH VERTICAL BISECTING LINE | ◫ | ◫ |
U+25F0 | WHITE SQUARE WITH UPPER LEFT QUADRANT | ◰ | ◰ |
U+25F1 | WHITE SQUARE WITH LOWER LEFT QUADRANT | ◱ | ◱ |
U+25F2 | WHITE SQUARE WITH LOWER RIGHT QUADRANT | ◲ | ◲ |
U+25F3 | WHITE SQUARE WITH UPPER RIGHT QUADRANT | ◳ | ◳ |
四、装饰字符(Dingbats):U+2700 至 U+27BF
Unicode 编号 | 字符描述 | 字符形状 | HTML 编码 |
U+2713 | CHECK MARK | ✓ | ✓ |
U+2714 | HEAVY CHECK MARK | ✔ | ✔ |
U+2717 | BALLOT X | ✗ | ✗ |
U+2718 | HEAVY BALLOT X | ✘ | ✘ |
U+2729 | STRESS OUTLINED WHITE STAR | ✩ | ✩ |
U+274F | LOWER RIGHT DROP-SHADOWED WHITE SQUARE | ❏ | ❏ |
U+2750 | UPPER RIGHT DROP-SHADOWED WHITE SQUARE | ❐ | ❐ |
Unicode 中的符号太多,所以操作系统中自带的字体未必能包含足够多的符号。例如对于前面介绍的几何形状区块(U+25A0 至 U+25FF),Windows 中完整支持的只有 Windows 7 中开始包含的 Segoe UI Symbol,大部分支持的只有 Windows XP 中开始包含的 Lucida Sans Unicode 和 Office 2007 中包含的 Arial Unicode MS。
Mac OS X 中也包含了和 Lucida Sans Unicode 类似的 Lucida Grande 字体,而在 Mac OS X 10.5 中也开始包含 Arial Unicode MS 字体。
Android 4.0 之前的默认字体是 Droid Sans,从 4.0 开始的默认字体是 Roboto;这两个字体都只包含少量的字符,而另外有个 Droid Sans Fallback 字体包含了许多字符,但还是不够全,例如几何形状区块的 96 个字符中它只包含 32 个。
第三方的字体也有不少支持这个区块的全部字符,例如 DejaVu Sans,FreeSans,STIX-Regular,STIXMath-Regular,Symbola 等。在 FileFormat.Info 网站中,我们可以看到 Unicode 各区块字符在各种常见字体中的完整度。
在浏览器渲染页面时,如果发现指定的字体缺少某个字符,它会按照自己的规则选择替代字体。这时候,在 Firefox 22 和 Chrome 31 的调试工具中我们依然能看到浏览器实际使用的字体。
注记:如果需要使用的图标较多,就会发现 Unicode 字符中还是有不少缺少的图形,这时候还是用第三方制作的图标字体(例如 Font Awesome)比较方便。
参考资料:
[1] Unicode 6.3 Character Code Charts
[2] Wikipedia - Unicode block
[3] Wikipedia - List of Unicode characters
[4] Wikipedia - Unicode symbols
[5] Wikipedia - Arrow (symbol)
[6] Wikipedia - Geometric Shapes
[7] Wikipedia - Miscellaneous Symbols
[8] Wikipedia - Dingbat
[9] FileFormat.Info - Unicode Blocks
[A] Wikipedia - Unicode font
[B] Unicode table for you
[C] Search for character(s) in Unicode 6.0.0
[D] Wikipedia - Unicode font
[E] Microsoft Typography - Fonts and Products
[F] Common fonts to all versions of Windows & Mac equivalents
[G] Typetester - Compare fonts for the screen
[H] CSS-Tricks - Icon Fonts are Awesome
[I] 一些可能会用到的特殊符号(Unicode) - Whikiey - 博客园
[J] * - XML与HTML字符实体引用列表