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! :)

字体jquery ---的更多相关文章

  1. fontIconPicker – 优雅的 jQuery 字体图标选择

    jQuery fontIconPicker 是一个小的 jQuery 插件,它可以让你实现一个优雅的带有分类.搜索和分页功能的图标选择器.图标列表可手动从下拉列表框,图标数组或对象,或者从 Fonte ...

  2. jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13 我要评论

    jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13我要评论 本文为大家介绍下jquery获得option的值和对option ...

  3. jquery字体更改后的鼠标-影像学改变//凝视内容

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  4. 会跳高的字体插件jquery.beattext.js

    插件描述:字体特效,会弹跳的字体插件jquery.beattext.js,兼容性如下: 使用方法 导入如下3个js文件: <script type="text/javascript&q ...

  5. jQuery字体缩放缩放插件zoomFontSize.js

    插件描述:jQuery字体缩放缩放插件zoomFontSize.js根据父类进行百分比缩放,兼容性如下: 使用方法 body 的class属性 添加 changbody_fontSize 而且整个页面 ...

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

    在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> ...

  7. jQuery之字体大小的设置

    先获取字体大小,进行处理. 再将修改的值保存. slice() 方法可从已有的数组中返回选定的元素.arrayObject.slice(start,end).start     必需.规定从何处开始选 ...

  8. JQuery实现最字体的放大缩小

    网页常常有对字体放大缩小的需求,我们不妨来看一下下面这段JQuery代码的实现. 假如在html页面代码中我们有这么一段代码: <p>啦啦啦啦啦啦啦啦啦啦</p> 那么JQue ...

  9. 用jquery操作字体颜色覆盖当前页面的css设置

    直接使用css操作color的时候,!important一直不生效,记录下,使用下面的可以起作用 用jquery操作字体颜色覆盖当前页面的css设置 $('a[href="?p=home&a ...

随机推荐

  1. 第三记 Java面向对象

    相信很多人都有听到,见到这么一句话:Java是一门面向对象编程的语言,但是又是否对这句话有了自己的理解呢? 一.面向对象 面向对象是一种新兴的程序设计方法,也可以说是一种新的程序设计规范(paradi ...

  2. USACO 2001 OPEN earthquake /// 最优比例生成树

    题目大意: https://www.cnblogs.com/forever97/p/3603572.html 讲解:https://www.jianshu.com/p/d40a740a527e 题解: ...

  3. tp6 控制器不存在:app\index\controller\Index

    tp6 控制器不存在:app\index\controller\Index config/app.php 修改如下 'auto_multi_app' => true,

  4. 解决MSF更新证书错误

    如下图所示提示签名无效下载失败,导致更新不了msf 解决办法如下: echo 'deb http://apt.metasploit.com/ lucid main' > /etc/apt/sou ...

  5. H5在js中向指定的元素添加样式

    今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...

  6. 使用 async await 封装微信小程序HTTP请求

    1. 编写将普通回调函数形式的方法转换为promise方法的promisic方法 // util.js const promisic = function (func) { return functi ...

  7. 面向对象oop 和类

    面向对象与面向过程的区别 面向对象:面向对象的思维模式说白了就是分类思维模式.思考问题首先会解决问题需要哪些分类,然后对这些分类进行单独思考.最后,才对某个分类下的细节进行面向过程的思索 自我理解(领 ...

  8. 打造“云边一体化”,时序时空数据库TSDB技术原理深度解密

    本文选自云栖大会下一代云数据库分析专场讲师自修的演讲——<TSDB云边一体化时序时空数据库技术揭秘> 自修 —— 阿里云智能数据库产品事业部高级专家 认识TSDB 第一代时序时空数据处理工 ...

  9. NOIp2018集训test-9-1(am)

    1.最大值 可以用FWT水过去,李巨写了FWT结果中途爆int了炸了几十分好像. 我乱搞了一下把除了大数据有or的搞出来然后90,还是蛮划算的.我yy的做法: 1.xor 字典树上贪心, 一开始我打了 ...

  10. Core Text 入门

    本文所涉及的代码你可以在这里下载到 https://github.com/kejinlu/CTTest,包含两个项目,一个Mac的NSTextView的测试项目,一个iOS的Core Text的测试项 ...