前端Unicode字符图标汇总

前端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字符之前，最好测试一下它们，确定不会出现在不同浏览器表现不同的情况出现。