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

你可能感兴趣的:(js学习笔记整理,前端Unicode字符图标)