个人博客
专注IT梦想的地方

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

如果你的页面设计中需要一些图标,你不必使用图片,也不必使用像 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字符之前,最好测试一下它们,确定不会出现在不同浏览器表现不同的情况出现。
赞(5) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » 可以代替图标的100+个Unicode符号

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏