字体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! :)
转载于:https://www.cnblogs.com/zoupufa/p/4229448.html
字体jquery ---相关推荐
- jQuery超酷字体显示效果
jQuery超酷字体显示效果,脚本, jQuery特效,动画效果,英文字体,jQuery超酷字体显示效果是一款基于jQuery实现的字体跳动显示特效.本素材由52dvd素材网为您提供免费下载,52dv ...
- 网页设计大赛过程的收获
网页设计大赛过程的收获 1. 引用文档方面 swiper的应用 - 参考文档swiper: http://www.xiaoshu168.com/jquery/103.html - 解决swiper冲突 ...
- 分享92个JS特效动画效果,总有一款适合您
分享92个JS特效动画效果,总有一款适合您 92个JS特效动画效果下载链接:https://pan.baidu.com/s/1C_b7PM8E8WUpNMethPGtbQ?pwd=r3f8 提取码: ...
- jquery字体颜色_基于jquery实现的web版excel
基于jquery实现的web版excel.包含excel的基本功能 支持合并单元格,拆分单元格 支持插入单元格,删除单元格 支持整行整列选择单元格 自定义右键菜单,可以设置单元格数量 支持鼠标左键拖动 ...
- Vue.js-Day07【项目实战(附带 完整项目源码)-day02:学习能力、字体图标(使用步骤)、在vue.js中使用jQuery】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
- jq设置html的fontsize,Jquery 设置字体大小(font-size)与行高(line-height)
Jquery 设置字体大小(font-size)与行高(line-height) var cssfontSize=$(".txt_container").css('font-siz ...
- oracle修改窗口字体大小,jQuery之字体大小的设置方法
先获取字体大小,进行处理. 再将修改的值保存. slice() 方法可从已有的数组中返回选定的元素. arrayObject.slice(start,end). start 必需.规定从何处开始选取. ...
- css与jquery、图标字体、常用数据
常用数据 *)按钮常用颜色:#008cBA/#169fe6;(字母大小写没有区别) css与jquery.图标字体. *)还能这样选择 header #search input[type=" ...
- 前端HTML调用jQuery库,属性操作:更换图片、添加字体样式(前端:HTML搭配jQuery系列教程六)
属性操作:更换图片.改变字体样式 1.更换图片: 在jQuery中,我们可以使用attr()方法来获取元素的某一个HTML属性值. 语法: $().attr("属性名") 说明:获 ...
最新文章
- 智能家居数据获得美好生活的6种方法
- Ubuntu16.04下Hadoop的本地安装与配置
- Oracle 子查询
- 无法连接到RDP服务器
- 计算机考研四大金刚,“四大金刚”考研一个都不少
- Table还是CSS,请您说说您的见解
- php扇形分布图,php生成扇形比例图的实例代码
- java日历类add方法_Java日历setFirstDayOfWeek()方法与示例
- python数据如何保存到excel中
- node ,express框架后台设置跨域操作,路由中间件
- linux文件偏移函数实验报告,Linux实验报告二.doc
- 图形界面中消息盒子的使用
- python_opencv 黑白图片之白色部分单独分离
- matlab稳定性实验分析,实验 控制系统稳定性分析的MATLAB实现
- 转---电脑的MAC实际地址可以修改吗?
- **遇到“Cannot create file “不要慌**
- 【Torch】Dataloader torch.utils.data.DataLoader全面详实概念理解
- Power BI——建模
- 如何理解CRM软件里的销售机会与线索
- python音标是什么_python转换工具之汉语拼音与国际音标的实现
热门文章
- 万能ansys与creo关联
- excel如何一键多姿势
- 计算机技术分队指挥类,公安指挥类包括哪些专业
- 孤独患者福音!日本科学家开发小型“大白”,戴上就能缓解痛苦焦虑
- 从此再不吃“肯德基”,无论那个管状物是蛔虫还是鸡肉组织
- 直播app源码Python爬虫练习 爬取图片
- Anaconda拒绝访问
- AWE GAE MEGOO 和 提高性能的INTEL的C++重新编译 BigTable是什么东东
- php札记,#php学习札记#基本语法
- linux gtx驱动程序,linux GTX1080TI安装显卡驱动小记