字体jquery ---
You don’t need icons! Here are 100+ unicode symbols that you can use
Danny Markov December 3rd, 2014
Ever needed to add an icon to your design, but you didn’t want to include images or an entire icon font like Font Awesome into your page? We’ve got good news for you – there is a vast library of available icons and glyphs already in your browser. It is called Unicode, and it is a standard which assigns a unique identifier for an ever expanding number (currently over 110 000) of characters, symbols and icons.
This doesn’t mean that you have a choice of a hundred thousand icons, though. It is up to the browser to render them, and it uses the fonts which are installed on the system to do so. In this article, we’ve collected a number of symbols that are available across Windows, Linux, OS X, Android and iOS. You can use them in your web designs today!
Tip: There is a good article which explains everything you need to know about character encodings and unicode, which we recommend for every software developer to read.
How to use these icons
The icons given in the tables below, are regular characters, which you can copy and paste as if they are letters of text. But if the encoding used to save your HTML/CSS files is not UTF-8 they might not show up. This is why we’ve provided an HTML escape code, which will always work. Here is what you need to do to use these icons:
- Find an icon that you like. We’ve provided small and large previews.
- Copy the code.
- Paste it in your HTML as regular text. In your CSS, you can use it as the value of the content property. In JS, PHP and other programming languages, you can use it as text in strings.
- You can customize the icons by setting a font-size, color and text shadows, just like regular text.
Icon-like
Name | Preview | 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
Name | Preview | 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
Name | Preview | Code | |
---|---|---|---|
Numero | № | № | № |
Copyright | © | © | © |
Registered | ® | ® | ® |
Trademark | ™ | ™ | ™ |
Estimated | ℮ | ℮ | ℮ |
Bullet | • | • | • |
Middle Dot | · | · | · |
Currency
Name | Preview | Code | |
---|---|---|---|
Euro | € | € | € |
Pound | £ | £ | £ |
Lira | ₤ | ₤ | ₤ |
Yen | ¥ | ¥ | ¥ |
Cent | ¢ | ¢ | ¢ |
Currency | ¤ | ¤ | ¤ |
Weather
Name | Preview | Code | |
---|---|---|---|
Degree | ° | ° | ° |
Small Sun | ☀ | ☀ | ☀ |
Big Sun | ☼ | ☼ | ☼ |
Cloud | ☁ | ☁ | ☁ |
Snowflake 1 | ❆ | ❆ | ❆ |
Snowflake 2 | ❅ | ❅ | ❅ |
Snowflake 3 | ❄ | ❄ | ❄ |
Pointers
Name | Preview | Code | |
---|---|---|---|
Pointer Left Black | ☚ | ☚ | ☚ |
Pointer Right Black | ☛ | ☛ | ☛ |
Pointer Left White | ☜ | ☜ | ☜ |
Pointer Up White | ☝ | ☝ | ☝ |
Pointer Right White | ☞ | ☞ | ☞ |
Pointer Down White | ☟ | ☟ | ☟ |
Card Suits
Name | Preview | Code | |
---|---|---|---|
Spades Black | ♠ | ♠ | ♠ |
Hearts Black | ♥ | ♥ | ♥ |
Diamonds Black | ♦ | ♦ | ♦ |
Clubs Black | ♣ | ♣ | ♣ |
Spades White | ♤ | ♤ | ♤ |
Hearts White | ♡ | ♡ | ♡ |
Diamonds White | ♢ | ♢ | ♢ |
Clubs White | ♧ | ♧ | ♧ |
Chess
Name | Preview | 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
Name | Preview | 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
Name | Preview | 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
Name | Preview | 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 | Ⅻ | Ⅻ | Ⅻ |
A few notes
There are some rendering differences between these symbols across operating symbols. This is caused by the different font families that are used. Also, iOS and Android replace some Unicode characters with emoji, so be sure to test there to make sure that this doesn’t happen and the icons show as intended. Have fun coding! :)
字体jquery ---的更多相关文章
- fontIconPicker – 优雅的 jQuery 字体图标选择
jQuery fontIconPicker 是一个小的 jQuery 插件,它可以让你实现一个优雅的带有分类.搜索和分页功能的图标选择器.图标列表可手动从下拉列表框,图标数组或对象,或者从 Fonte ...
- jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13 我要评论
jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13我要评论 本文为大家介绍下jquery获得option的值和对option ...
- jquery字体更改后的鼠标-影像学改变//凝视内容
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
- 会跳高的字体插件jquery.beattext.js
插件描述:字体特效,会弹跳的字体插件jquery.beattext.js,兼容性如下: 使用方法 导入如下3个js文件: <script type="text/javascript&q ...
- jQuery字体缩放缩放插件zoomFontSize.js
插件描述:jQuery字体缩放缩放插件zoomFontSize.js根据父类进行百分比缩放,兼容性如下: 使用方法 body 的class属性 添加 changbody_fontSize 而且整个页面 ...
- jQuery控制网页字体大小和肤色
在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> ...
- jQuery之字体大小的设置
先获取字体大小,进行处理. 再将修改的值保存. slice() 方法可从已有的数组中返回选定的元素.arrayObject.slice(start,end).start 必需.规定从何处开始选 ...
- JQuery实现最字体的放大缩小
网页常常有对字体放大缩小的需求,我们不妨来看一下下面这段JQuery代码的实现. 假如在html页面代码中我们有这么一段代码: <p>啦啦啦啦啦啦啦啦啦啦</p> 那么JQue ...
- 用jquery操作字体颜色覆盖当前页面的css设置
直接使用css操作color的时候,!important一直不生效,记录下,使用下面的可以起作用 用jquery操作字体颜色覆盖当前页面的css设置 $('a[href="?p=home&a ...
随机推荐
- Redis数据结构之压缩列表-ziplist
为了节约内存,在zset和hash容器对象元素个数较少时,Redis会采用压缩列表(ziplist)进行存储. 压缩列表是一块连续的内存空间,元素之间紧挨着存储,不存在冗余 一个压缩列表可以包含任意多 ...
- 30-Ubuntu-用户权限-01-用户和权限的基本概念
1.用户 用户是Linux系统工作中重要的一环,用户管理包括用户和组管理. 在Linux系统中,不论是由本机或是远程管理登录系统,每个系统都必须拥有一个账号,并且对于不同的系统资源拥有不同的使用权限. ...
- 记一次vue 普通异步请求微信二进制二维码 乱码 问题解决然后渲染
后端压力大,前端分忧. /*用微信小程序token拿二维码*/ async fetchMINIQRcode({commit,state},params){ var instance = axios.c ...
- Linux 进程间通信 消息队列 实现两个进程间通信
例子: 通过消息队列实现两个进程间通信,一个进程从终端输入数据,通过消息队列发送,另一个进程通过消息队列接收数据 文件1 创建进程1 终端输入通过消息队列发送数据 #include <stdio ...
- linux 两个进程通过 共享内存 通信例子
例子1:两个进程通过共享内存通信,一个进程向共享内存中写入数据,另一个进程从共享内存中读出数据 文件1 创建进程1,实现功能,打印共享内存中的数据 #include <stdio.h> # ...
- (转)Unity UI之GUI使用
一:GUI技术介绍 二:常见基础控件使用 三:GUILayout自动布局 四:GUI皮肤 一:GUI技术介绍 GUI技术看似成为古老的技术,但是Unity5.x之后并没有取消这种UI传统的技术.Uni ...
- js求三个数的最大值运算
js代码: <script> // var num1 = 32, // num2 = 43, // num3 = 98; // if (num1 > num2) { // if (n ...
- Tools: windbg 使用指南
windbg使用 符号表C:\Symbols; SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols 系统变量_NT_SYMBOL_PAT ...
- redis安装到本地服务的方法
要安装Redis,首先要获取安装包. Windows的Redis安装包需要到以下GitHub链接找到. 链接:https://github.com/MSOpenTech/redis 打开网站后,找到R ...
- http经典解析
HTTP访问流程想象用浏览器打开imooc.com网站,HTTP走过的环节: 1.首先,是对imooc.com域名解析, (1.1)浏览器搜索浏览器自身的DNS缓存. (1.2)如果浏览器没有找到自身 ...