好久没来了，最近项目很多，今天要说的是个页面上用到的icon。

话“icon”

现在有很多icon库，我们再也不用切图来适配不同的分辨率了，但是对于新手来说，查阅icon库来找到适合的icon，实在费时费力。

有一个在刚学习HTML的时候我们就知道特殊字符，不过很多人对特殊字符不甚了解。其实html字符，不只有哪些基本的简单的，我们来说说特殊字符的广博~

表格归类：

⇠  箭头类
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
⇠ &#8672 \u21E0 \21E0 ⇢ &#8674 \u21E2 \21E2
⇡ &#8673 \u21E1 \21E1 ⇣ &#8675 \u21E3 \21E3
↞ &#8606 \u219E \219E ↠ &#8608 \u21A0 \21A0
↟ &#8607 \u219F \219F ↡ &#8609 \u21A1 \21A1
← &#8592 \u2190 \2190 → &#8594 \u2192 \2192
↑ &#8593 \u2191 \2191 ↓ &#8595 \u2193 \2193
↔ &#8596 \u2194 \2194 &#8597 \u2195 \2195
⇄ &#8644 \u21C4 \21C4 ⇅ &#8645 \u21C5 \21C5
↢ &#8610 \u21A2 \21A2 ↣ &#8611 \u21A3 \21A3
⇞ &#8670 \u21DE \21DE ⇟ &#8671 \u21DF \21DF
↫ &#8619 \u21AB \21AB ↬ &#8620 \u21AC \21AC
⇜ &#8668 \u21DC \21DC ⇝ &#8669 \u21DD \21DD
↚ &#8602 \u219A \219A ↛ &#8603 \u219B \219B
↮ &#8622 \u21AE \21AE ↭ &#8621 \u21AD \21AD
⇦ &#8678 \u21E6 \21E6 ⇨ &#8680 \u21E8 \21E8
⇧ &#8679 \u21E7 \21E7 ⇩ &#8681 \u21E9 \21E9
▲ &#9650 \u25B2 \25B2 ► &#9658 \u25BA \25BA
▼ &#9660 \u25BC \25BC ◄ &#9668 \u25C4 \25C4
➔ &#10132 \u2794 \2794 ➙ &#10137 \u2799 \2799
➨ &#10152 \u27A8 \27A8 ➲ &#10162 \u27B2 \27B2
➜ &#10140 \u279C \279C ➞ &#10142 \u279E \279E
➟ &#10143 \u279F \279F ➠ &#10144 \u27A0 \27A0
➤ &#10148 \u27A4 \27A4 ➥ &#10149 \u27A5 \27A5
➦ &#10150 \u27A6 \27A6 ➧ &#10151 \u27A7 \27A7
➵ &#10165 \u27B5 \27B5 ➸ &#10168 \u27B8 \27B8
➼ &#10172 \u27BC \27BC ➽ &#10173 \u27BD \27BD
➺ &#10170 \u27BA \27BA ➳ &#10163 \u27B3 \27B3
↷ &#8631 \u21B7 \21B7 ↶ &#8630 \u21B6 \21B6
↻ &#8635 \u21BB \21BB ↺ &#8634 \u21BA \21BA
↵ &#8629 \u21B5 \21B5 ↯ &#8623 \u21AF \21AF
➾ &#10174 \u27BE \27BE        
  基本形状类
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
&#10084 \u2764 \2764 &#9992 \u2708 \2708
★ &#9733 \u2605 \2605 ✦ &#10022 \u2726 \2726
&#9728 \u2600 \2600 ◆ &#9670 \u25C6 \25C6
◈ &#9672 \u25C8 \25C8 ▣ &#9635 \u25A3 \25A3
☻ &#9787 \u263B \263B &#9786 \u263A \263A
&#9785 \u2639 \2639 &#9993 \u2709 \2709
&#9742 \u260E \260E ☏ &#9743 \u260F \260F
✆ &#9990 \u2706 \2706 � &#65533 \uFFFD \FFFD
&#9729 \u2601 \2601 &#9730 \u2602 \2602
&#10052 \u2744 \2744 &#9731 \u2603 \2603
❈ &#10056 \u2748 \2748 ✿ &#10047 \u273F \273F
❀ &#10048 \u2740 \2740 ❁ &#10049 \u2741 \2741
&#9752 \u2618 \2618 ❦ &#10086 \u2766 \2766
&#9749 \u9749 \9749 ❂ &#10050 \u2742 \2742
☥ &#9765 \u2625 \2625 &#9774 \u262E \262E
&#9775 \u262F \262F &#9770 \u262A \262A
☤ &#9764 \u2624 \2624 ✄ &#9988 \u2704 \2704
&#9986 \u2702 \2702 &#9784 \u2638 \2638
&#9875 \u2693 \2693 &#9763 \u2623 \2623
&#9888 \u26A0 \26A0 &#9889 \u26A1 \26A1
&#9762 \u2622 \2622 &#9851 \u267B \267B
&#9855 \u267F \267F &#9760 \u2620 \2620
¥  货币类
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
$ &#36 \u0024 \0024 ¢ &#162 \u00A2 \00A2
£ &#163 \u00A3 \00A3 ¤ &#164 \u00A4 \00A4
€ &#8364 \u20AC \20AC ¥ &#165 \u00A5 \00A5
₱ &#8369 \u20B1 \20B1 ₹ &#8377 \u20B9 \20B9
½  数学类
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
½ &#189 \u00BD \00BD ¼ &#188 \u00BC \00BC
¾ &#190 \u00BE \00BE ⅓ &#8531 \u2153 \2153
⅔ &#8532 \u2154 \2154 ⅛ &#8539 \u215B \215B
⅜ &#8540 \u215C \215C ⅝ &#8541 \u215D \215D
‰ &#8240 \u2030 \2030 % &#37 \u0025 \0025
< &#60 \u003C \003C > &#62 \u003E \003E
♫  音乐符号类
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
♩ &#9833 \u2669 \2669 ♪ &#9834 \u266A \266A
♫ &#9835 \u266B \266B ♬ &#9836 \u266C \266C
♭ &#9837 \u266D \266D ♯ &#9839 \u266F \266F
  对错号
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
  &#160 \u00A0 \00A0 ☐ &#9744 \u2610 \2610
&#9745 \u2611 \2611 ☒ &#9746 \u2612 \2612
✓ &#10003 \u2713 \2713 &#10004 \u2714 \2714
✕ &#10005 \u10005 \10005 &#10006 \u2716 \2716
✗ &#10007 \u2717 \2717 ✘ &#10008 \u2718 \2718
★  全都是星星
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
★ &#9733 \u2605 \2605 ✭ &#10029 \u272D \272D
✮ &#10030 \u272E \272E ☆ &#9734 \u2606 \2606
✪ &#10026 \u272A \272A &#10017 \u2721 \2721
✯ &#10031 \u272F \272F ✵ &#10037 \u2735 \2735
✶ &#10038 \u2736 \2736 ✸ &#10040 \u2738 \2738
✹ &#10041 \u2739 \2739 ✺ &#10042 \u273A \273A
✱ &#10033 \u2731 \2731 ✲ &#10034 \u2732 \2732
&#10036 \u2734 \2734 &#10035 \u2733 \2733
✻ &#10043 \u273B \273B ✽ &#10045 \u273D \273D
❋ &#10059 \u274B \274B ❆ &#10054 \u2746 \2746
&#10052 \u2744 \2744 ❅ &#10053 \u2745 \2745
  星座类
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
&#9800 \u2648 \2648 &#9801 \u2649 \2649
&#9802 \u264A \264A &#9803 \u264B \264B
&#9804 \u264C \264C &#9805 \u264D \264D
&#9806 \u264E \264E &#9807 \u264F \264F
&#9808 \u2650 \2650 &#9809 \u2651 \2651
&#9810 \u2652 \2652 &#9811 \u2653 \2653
♚  国际象棋类
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
♚ &#9818 \u265A \265A ♛ &#9819 \u265B \265B
♜ &#9820 \u265C \265C ♝ &#9821 \u265D \265D
♞ &#9822 \u265E \265E ♟ &#9823 \u265F \265F
♔ &#9812 \u2654 \2654 ♕ &#9813 \u2655 \2655
♖ &#9814 \u2656 \2656 ♗ &#9815 \u2657 \2657
♘ &#9816 \u2658 \2658 ♙ &#9817 \u2659 \2659
♣  扑克牌类
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
♠ &#9824 \u2660 \2660 ♣ &#9827 \u2663 \2663
♥ &#9829 \u2665 \2665 ♦ &#9830 \u2666 \2666
♤ &#9828 \u2664 \2664 ♧ &#9831 \u2667 \2667
♡ &#9825 \u2661 \2661 ♢ &#9826 \u2662 \2662
Ω  希腊字母
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
Α &#913 \u0391 \0391 Β &#914 \u0392 \0392
Γ &#915 \u0393 \0393 Δ &#916 \u0394 \0394
Ε &#917 \u0395 \0395 Ζ &#918 \u0396 \0396
Η &#919 \u0397 \0397 Θ &#920 \u0398 \0398
Ι &#921 \u0399 \0399 Κ &#922 \u039A \039A
Λ &#923 \u039B \039B Μ &#924 \u039C \039C
Ν &#925 \u039D \039D Ξ &#926 \u039E \039E
Ο &#927 \u039F \039F Π &#928 \u03A0 \03A0
Ρ &#929 \u03A1 \03A1 Σ &#931 \u03A3 \03A3
Τ &#932 \u03A4 \03A4 Υ &#933 \u03A5 \03A5
Φ &#934 \u03A6 \03A6 Χ &#935 \u03A7 \03A7
Ψ &#936 \u03A8 \03A8 Ω &#937 \u03A9 \03A9
☩  十字
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
☨ &#9768 \u2628 \2628 ☩ &#9769 \u2629 \2629
&#10013 \u271D \271D ✞ &#10014 \u271E \271E
✟ &#10015 \u271F \271F ✠ &#10016 \u2720 \2720
✚ &#10010 \u271A \271A † &#8224 \u2020 \2020
✢ &#10018 \u2722 \2722 ✤ &#10020 \u2724 \2724
✣ &#10019 \u2723 \2723 ✥ &#10021 \u2725 \2725
©  法律符号
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
® &#174 \u00AE \00AE © &#169 \u00A9 \00A9
℗ &#8471 \u2117 \2117 ™ &#153 \u0099 \0099
℠ &#8480 \u2120 \2120        
@  标点和符号
符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
« &#171 \u00AB \00AB » &#187 \u00BB \00BB
‹ &#139 \u008B \008B › &#155 \u009B \009B
“ &#8220 \u201C \201C ” &#8221 \u201D \201D
‘ &#8216 \u2018 \2018 ’ &#8217 \u2019 \2019
• &#8226 \u2022 \2022 ◦ &#9702 \u25E6 \25E6
¡ &#161 \u00A1 \00A1 ¿ &#191 \u00BF \00BF
℅ &#8453 \u2105 \2105 № &#8470 \u2116 \2116
& &#38 \u0026 \0026 @ &#64 \u0040 \0040
℞ &#8478 \u211E \211E ℃ &#8451 \u2103 \2103
℉ &#8457 \u2109 \2109 ° &#176 \u00B0 \00B0
| &#124 \u007C \007C ¦ &#166 \u00A6 \00A6
– &#8211 \u2013 \2013 — &#8212 \u2014 \2014
… &#8230 \u2026 \2026 &#182 \u00B6 \00B6
∼ &#8764 \u223C \223C ≠ &#8800 \u2260 \2260 

Miscellaneous Symbols

哇！原来特殊字符也能这么丰富，并且查找你的icon更便捷。那我们使用的时候怎么使用呢？

使用方法：

  • 这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8；
  • 编号用在HTML中时，需要在前面加上&#符号；
  • 用于CSS文件中，但是需要用反斜杠\转义；
  • 用于JavaScript，和CSS用法一样，不过要用\u来转义。

需要注意：

  • 有的字符在不同的浏览器下表现不太一样；比如小雪人  在Firefox和Chrome下不太一样，钻石 ◆ 在IE下要比Chrome下要大一点儿；
  • 有的字符在某个浏览器下不会显示；当然原因并不是字符代码的问题，而是浏览器的bug，比如，–在Chrome下。
  • 但是，98%的字符都能在所有浏览器下正常显示的，不过如果你真的要使用，最好仔细在各个浏览器下验证一番。
  • 经测试这些字符在Android/iOS等智能终端的识别度比较差，所以，使用的时候要特别注意移动浏览器～～

读了以上内容，你是否get了除&nbsp;外的新技能呢？ 希望对你有帮助，谢谢~

icon VS html特殊字符的更多相关文章

  1. 爬虫技术 -- 基础学习（一）HTML规范化（附特殊字符编码表）

    最近在做网页信息提取这方面的,由于没接触过这系列的知识点,所以逛博客,看文档~~看着finallyly大神的博文和文档,边看边学习边总结~~ 对网站页面进行信息提取,需要进行页面解析,解析的方法有以下 ...

  2. html特殊字符（css3 content）

    由于偶尔用到,又经常忘记,所以把网上的资料考下来记录一下. <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. Android studio使用gradle动态构建APP(不同的包,不同的icon、label)

    最近有个需求,需要做两个功能相似的APP,大部分代码是一样的,只是界面不一样,以前要维护两套代码,比较麻烦,最近在网上找资料,发现可以用gradle使用同一套代码构建两个APP.下面介绍使用方法: 首 ...

  4. h5应用缓存及收藏时Icon显示

    h5应用实现离线缓存,加载后,断网仍然可以继续使用. 一.需求 转行做h5,目前做赛道游戏,动手做了个赛道编辑器web版的,由于web版需要开启服务器才能使用,策划要想回家使用就要发布到外网服务器了, ...

  5. 把UI图里的小图标制作成icon font

    一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...

  6. [SQL Server] 特殊字符、上标、下标处理

    今天遇到一个问题是往 SQL Server 中导入像m².m³这样的单位数据,可是在 SQL Server 中查看到的都是 m2.m3,于是在网上查了一下资料,顺便摘录下来供日后查阅. 一  Wind ...

  7. 【C#】无损转换Image为Icon

    如题,市面上常见的方法是: var handle = bmp.GetHicon(); //得到图标句柄 return Icon.FromHandle(handle); //通过句柄得到图标 此法的问题 ...

  8. java转换 HTML字符实体，java特殊字符转义字符串

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...

  9. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

随机推荐

  1. Python——eventlet.greenpool

    该模块提供对 greenthread 池的支持. greenthread 池提供了一定数量的备用 greenthread ,有效限制了孵化 greenthread 过多导致的内存不足,当池子中没有足够 ...

  2. QMusic

    https://github.com/dragondjf/QMusic        QMusic是基于python + PyQT5 + QML的一款本地音乐播放器,旨在提升Linux下更好的音乐播放 ...

  3. Android(或者Java)通过HttpUrlConnection向SpringMVC请求数据（数据绑定）

    问题描写叙述 当我们使用SpringMVC作为服务端的框架时,有时不仅仅要应对web前端(jsp.javascript.Jquery等)的訪问请求,有时还可能须要响应Android和JavaSE(桌面 ...

  4. gridview列超链接的几种设置方法

    <asp:GridView ID="GridView1" runat="server" Width="100%" AutoGenera ...

  5. HTML5 touche vents drag to move & AF actionsheet by longTap

    $('img').on("touchstart",function(E){ //E.preventDefault();E.stopPropagation(); var el=thi ...

  6. JSON.stringify报cyclic object value错误

    这是一个典型的循环引用的错误,一个对象里引用自己就会立刻得到这个错误: obj = { x:555, y: "hi" }; obj.myself = obj; try{ json ...

  7. input元素默认选中设置

    单选按钮: 加checked=checked属性 复选框 加checked=checked属性 select下拉框 加selected=selected属性 date日期: value='2018-0 ...

  8. vue如何加入百度联盟广告

    在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js 直接复制粘贴到自己网页中便可显示对应广告. 在vue中由于都是vue组件,不支持直接在组件中加入这样一段一段的js代码, ...

  9. daterangepicker日历插件使用参数注意问题

    显示具体时间时分秒: timePicker设置为true,//有些资料写的pickerTime不太对 重点大坑:修改时间默认展示格式,把fomat写在locale中,网上很多资料说直接写在datera ...

  10. 制作做最小的fedora、ubuntu ， jeos系统

    之前做过, 2018年4月底,最新的fedora28 .ubuntu18.04发布后,自己又尝试做了下. ubuntu的成功了,比较简单: fedora的其实不用自己去制作,直接定制官方的Atomic ...