逐浪云主机

立即开通

可以代替图标的100+个Unicode符号

作者:本站编辑 发布时间:2018-03-03 来源:佚名 点击数:

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


本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友