本站目前升级了全新主题zhime,该主题色彩更清新明亮。售价99元/套,你值得拥有,后台配置全,永久更新。另外还有Next.js版本!😃

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

读完了点一下,作者能得积分

赞赏

如果这篇内容帮到了你,不妨请作者喝杯咖啡

分享 微博 QQ

发表评论

发表评论