当前位置主页 > 资料库 > 前端教程 > 可以代替图标的100+个Unicode符号

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

12-25

如果你的页面设计中需要一些图标,你不必使用图片,也不必使用像 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 Ⅻ
Previous:
上一篇:你不知道的7个CSS单位
Next:
下一篇:12项你应该掌握的有用的CSS3特性
返回顶部