字体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:

  1. Find an icon that you like. We’ve provided small and large previews.
  2. Copy the code.
  3. 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.
  4. 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! :)

时间： 2024-12-19 22:54:21

字体jquery ---的相关文章

jQuery实现设置字体大小代码实例

jQuery实现设置字体大小代码实例:设置网页中字体的大小是常见的操作,下面就通过代码实例介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落<

为什么html5用的jQuery Mobile在手机浏览器/微信中打开字体很小

头部加入 <header> <metaname="viewport"content="width=device-width, initial-scale=1"> </header> 为什么html5用的jQuery Mobile在手机浏览器/微信中打开字体很小,布布扣,bubuko.com

分享一款jQuery创意字体特效 js+css+html5 qhttl.com

分享一款jQuery创意字体特效,字体超级棒 共八种效果,下面先上图: 预览地址:http://www.qhttl.com/content/view/2014/07/19/jiaoben71/jiaoben71/index.html 下载地址:jQuery创意字体特效 分享一款jQuery创意字体特效 js+css+html5 qhttl.com,布布扣,bubuko.com

jquery鼠标经过字体发生变化-图片发生变化//为注释内容

<!doctype html> <html> <head> <meta charset="gb2312"> <title>部长练习jquery的属性</title> <script src="js/jquery-1.11.1.min.js"></script> <style> .bor{border:10px solid yellow;} .red{color

jQ禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突

1. 禁止右键点击 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 代码如下: $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($

使用 Jquery 实现字体大小转换

导入 jquery1.9.1.js 库 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link href="css/style.css" type="text/css" rel="stylesheet" /> <script type="text/ja

jQuery之实现页面字体变大、变小

转载请标明,http://www.gxabase.com jQuery之实现字体变大.变小,这在我们做网页的时候经常会使用的功能,以下为实现过程: 1.制作网页页面index.html,页面代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>jQuery training</title> <

jQuery控制网页字体大小和肤色

在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <

jQuery实现字体颜色渐变效果

jQuery不允许css属性值为非数字的属性进行动画处理, 比如.animate(color:'red',500)或是.animate(fontWeight:'bold',500)都无法运行, 因此如果想实现颜色渐变的效果需要其他方法,示例如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Do