如何在元素内容前后加图标
大家最常用作图标的元素是i标签，为什么呢？
- 用 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写）；
- 比 短，但 gzip 后差异很小，不过打字可以少按三个键；
- 多数图标用的是空 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读（这样即使有特殊处理也跳过了），机器理解起来应该也没什么影响。
综合来看，从实用性上暂时没看出有什么缺陷，所以目前用不用 取决于你对于遵循规范有多洁癖。
具体如何在元素内容前后添加图标呢？这就要用使用伪元素:before和after，语法：
cssSelector:before{…} cssSelector.after{…}
1. 直接插入图片
#example:before { content:url(imgUrl); … }
2. 使用特殊字符
2.1 语法
#example:before { content:”\21E0”; … }
2.2 HTML特殊字符的html、js、css写法汇总表
? 箭头类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
⇠ |
\u21E0 |
\21E0 |
? |
⇢ |
\u21E2 |
\21E2 |
|
? |
⇡ |
\u21E1 |
\21E1 |
? |
⇣ |
\u21E3 |
\21E3 |
|
? |
↞ |
\u219E |
\219E |
? |
↠ |
\u21A0 |
\21A0 |
|
? |
↟ |
\u219F |
\219F |
? |
↡ |
\u21A1 |
\21A1 |
|
← |
← |
\u2190 |
\2190 |
→ |
→ |
\u2192 |
\2192 |
|
↑ |
↑ |
\u2191 |
\2191 |
↓ |
↓ |
\u2193 |
\2193 |
|
? |
↔ |
\u2194 |
\2194 |
? |
↕ |
\u2195 |
\2195 |
|
? |
⇄ |
\u21C4 |
\21C4 |
? |
⇅ |
\u21C5 |
\21C5 |
|
? |
↢ |
\u21A2 |
\21A2 |
? |
↣ |
\u21A3 |
\21A3 |
|
? |
⇞ |
\u21DE |
\21DE |
? |
⇟ |
\u21DF |
\21DF |
|
? |
↫ |
\u21AB |
\21AB |
? |
↬ |
\u21AC |
\21AC |
|
? |
⇜ |
\u21DC |
\21DC |
? |
⇝ |
\u21DD |
\21DD |
|
? |
↚ |
\u219A |
\219A |
? |
↛ |
\u219B |
\219B |
|
? |
↮ |
\u21AE |
\21AE |
? |
↭ |
\u21AD |
\21AD |
|
? |
⇦ |
\u21E6 |
\21E6 |
? |
⇨ |
\u21E8 |
\21E8 |
|
? |
⇧ |
\u21E7 |
\21E7 |
? |
⇩ |
\u21E9 |
\21E9 |
|
▲ |
▲ |
\u25B2 |
\25B2 |
? |
► |
\u25BA |
\25BA |
|
▼ |
▼ |
\u25BC |
\25BC |
? |
◄ |
\u25C4 |
\25C4 |
|
? |
➔ |
\u2794 |
\2794 |
? |
➙ |
\u2799 |
\2799 |
|
? |
➨ |
\u27A8 |
\27A8 |
? |
➲ |
\u27B2 |
\27B2 |
|
? |
➜ |
\u279C |
\279C |
? |
➞ |
\u279E |
\279E |
|
? |
➟ |
\u279F |
\279F |
? |
➠ |
\u27A0 |
\27A0 |
|
? |
➤ |
\u27A4 |
\27A4 |
? |
➥ |
\u27A5 |
\27A5 |
|
? |
➦ |
\u27A6 |
\27A6 |
? |
➧ |
\u27A7 |
\27A7 |
|
? |
➵ |
\u27B5 |
\27B5 |
? |
➸ |
\u27B8 |
\27B8 |
|
? |
➼ |
\u27BC |
\27BC |
? |
➽ |
\u27BD |
\27BD |
|
? |
➺ |
\u27BA |
\27BA |
? |
➳ |
\u27B3 |
\27B3 |
|
? |
↷ |
\u21B7 |
\21B7 |
? |
↶ |
\u21B6 |
\21B6 |
|
? |
↻ |
\u21BB |
\21BB |
? |
↺ |
\u21BA |
\21BA |
|
? |
↵ |
\u21B5 |
\21B5 |
? |
↯ |
\u21AF |
\21AF |
|
? |
➾ |
\u27BE |
\27BE |
|
|
|
|
? 基本形状类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
❤ |
\u2764 |
\2764 |
? |
✈ |
\u2708 |
\2708 |
|
★ |
★ |
\u2605 |
\2605 |
? |
✦ |
\u2726 |
\2726 |
|
? |
☀ |
\u2600 |
\2600 |
◆ |
◆ |
\u25C6 |
\25C6 |
|
? |
◈ |
\u25C8 |
\25C8 |
? |
▣ |
\u25A3 |
\25A3 |
|
? |
☻ |
\u263B |
\263B |
? |
☺ |
\u263A |
\263A |
|
? |
☹ |
\u2639 |
\2639 |
? |
✉ |
\u2709 |
\2709 |
|
? |
☎ |
\u260E |
\260E |
? |
☏ |
\u260F |
\260F |
|
? |
✆ |
\u2706 |
\2706 |
? |
� |
\uFFFD |
\FFFD |
|
? |
☁ |
\u2601 |
\2601 |
? |
☂ |
\u2602 |
\2602 |
|
? |
❄ |
\u2744 |
\2744 |
? |
☃ |
\u2603 |
\2603 |
|
? |
❈ |
\u2748 |
\2748 |
? |
✿ |
\u273F |
\273F |
|
? |
❀ |
\u2740 |
\2740 |
? |
❁ |
\u2741 |
\2741 |
|
? |
☘ |
\u2618 |
\2618 |
? |
❦ |
\u2766 |
\2766 |
|
? |
☕ |
\u9749 |
\9749 |
? |
❂ |
\u2742 |
\2742 |
|
? |
☥ |
\u2625 |
\2625 |
? |
☮ |
\u262E |
\262E |
|
? |
☯ |
\u262F |
\262F |
? |
☪ |
\u262A |
\262A |
|
? |
☤ |
\u2624 |
\2624 |
? |
✄ |
\u2704 |
\2704 |
|
? |
✂ |
\u2702 |
\2702 |
? |
☸ |
\u2638 |
\2638 |
|
? |
⚓ |
\u2693 |
\2693 |
? |
☣ |
\u2623 |
\2623 |
|
? |
⚠ |
\u26A0 |
\26A0 |
? |
⚡ |
\u26A1 |
\26A1 |
|
? |
☢ |
\u2622 |
\2622 |
? |
♻ |
\u267B |
\267B |
|
? |
♿ |
\u267F |
\267F |
? |
☠ |
\u2620 |
\2620 |
￥ 货币类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
$ |
$ |
\u0024 |
\0024 |
￠ |
¢ |
\u00A2 |
\00A2 |
|
￡ |
£ |
\u00A3 |
\00A3 |
¤ |
¤ |
\u00A4 |
\00A4 |
|
€ |
€ |
\u20AC |
\20AC |
￥ |
¥ |
\u00A5 |
\00A5 |
|
? |
₱ |
\u20B1 |
\20B1 |
? |
₹ |
\u20B9 |
\20B9 |
? 数学类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
½ |
\u00BD |
\00BD |
? |
¼ |
\u00BC |
\00BC |
|
? |
¾ |
\u00BE |
\00BE |
? |
⅓ |
\u2153 |
\2153 |
|
? |
⅔ |
\u2154 |
\2154 |
? |
⅛ |
\u215B |
\215B |
|
? |
⅜ |
\u215C |
\215C |
? |
⅝ |
\u215D |
\215D |
|
‰ |
‰ |
\u2030 |
\2030 |
% |
% |
\u0025 |
\0025 |
|
< |
< |
\u003C |
\003C |
> |
> |
\u003E |
\003E |
? 音乐符号类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
♩ |
\u2669 |
\2669 |
? |
♪ |
\u266A |
\266A |
|
? |
♫ |
\u266B |
\266B |
? |
♬ |
\u266C |
\266C |
|
? |
♭ |
\u266D |
\266D |
? |
♯ |
\u266F |
\266F |
? 对错号
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
|
|
\u00A0 |
\00A0 |
? |
☐ |
\u2610 |
\2610 |
|
? |
☑ |
\u2611 |
\2611 |
? |
☒ |
\u2612 |
\2612 |
|
? |
✓ |
\u2713 |
\2713 |
? |
✔ |
\u2714 |
\2714 |
|
? |
✕ |
\u10005 |
\10005 |
? |
✖ |
\u2716 |
\2716 |
|
? |
✗ |
\u2717 |
\2717 |
? |
✘ |
\u2718 |
\2718 |
★ 全都是星星
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
★ |
★ |
\u2605 |
\2605 |
? |
✭ |
\u272D |
\272D |
|
? |
✮ |
\u272E |
\272E |
☆ |
☆ |
\u2606 |
\2606 |
|
? |
✪ |
\u272A |
\272A |
? |
✡ |
\u2721 |
\2721 |
|
? |
✯ |
\u272F |
\272F |
? |
✵ |
\u2735 |
\2735 |
|
? |
✶ |
\u2736 |
\2736 |
? |
✸ |
\u2738 |
\2738 |
|
? |
✹ |
\u2739 |
\2739 |
? |
✺ |
\u273A |
\273A |
|
? |
✱ |
\u2731 |
\2731 |
? |
✲ |
\u2732 |
\2732 |
|
? |
✴ |
\u2734 |
\2734 |
? |
✳ |
\u2733 |
\2733 |
|
? |
✻ |
\u273B |
\273B |
? |
✽ |
\u273D |
\273D |
|
? |
❋ |
\u274B |
\274B |
? |
❆ |
\u2746 |
\2746 |
|
? |
❄ |
\u2744 |
\2744 |
? |
❅ |
\u2745 |
\2745 |
? 星座类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
♈ |
\u2648 |
\2648 |
? |
♉ |
\u2649 |
\2649 |
|
? |
♊ |
\u264A |
\264A |
? |
♋ |
\u264B |
\264B |
|
? |
♌ |
\u264C |
\264C |
? |
♍ |
\u264D |
\264D |
|
? |
♎ |
\u264E |
\264E |
? |
♏ |
\u264F |
\264F |
|
? |
♐ |
\u2650 |
\2650 |
? |
♑ |
\u2651 |
\2651 |
|
? |
♒ |
\u2652 |
\2652 |
? |
♓ |
\u2653 |
\2653 |
? 国际象棋类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
♚ |
\u265A |
\265A |
? |
♛ |
\u265B |
\265B |
|
? |
♜ |
\u265C |
\265C |
? |
♝ |
\u265D |
\265D |
|
? |
♞ |
\u265E |
\265E |
? |
♟ |
\u265F |
\265F |
|
? |
♔ |
\u2654 |
\2654 |
? |
♕ |
\u2655 |
\2655 |
|
? |
♖ |
\u2656 |
\2656 |
? |
♗ |
\u2657 |
\2657 |
|
? |
♘ |
\u2658 |
\2658 |
? |
♙ |
\u2659 |
\2659 |
? 扑克牌类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
♠ |
\u2660 |
\2660 |
? |
♣ |
\u2663 |
\2663 |
|
? |
♥ |
\u2665 |
\2665 |
? |
♦ |
\u2666 |
\2666 |
|
? |
♤ |
\u2664 |
\2664 |
? |
♧ |
\u2667 |
\2667 |
|
? |
♡ |
\u2661 |
\2661 |
? |
♢ |
\u2662 |
\2662 |
Ω 希腊字母
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
Α |
Α |
\u0391 |
\0391 |
Β |
Β |
\u0392 |
\0392 |
|
Γ |
Γ |
\u0393 |
\0393 |
Δ |
Δ |
\u0394 |
\0394 |
|
Ε |
Ε |
\u0395 |
\0395 |
Ζ |
Ζ |
\u0396 |
\0396 |
|
Η |
Η |
\u0397 |
\0397 |
Θ |
Θ |
\u0398 |
\0398 |
|
Ι |
Ι |
\u0399 |
\0399 |
Κ |
Κ |
\u039A |
\039A |
|
Λ |
Λ |
\u039B |
\039B |
Μ |
Μ |
\u039C |
\039C |
|
Ν |
Ν |
\u039D |
\039D |
Ξ |
Ξ |
\u039E |
\039E |
|
Ο |
Ο |
\u039F |
\039F |
Π |
Π |
\u03A0 |
\03A0 |
|
Ρ |
Ρ |
\u03A1 |
\03A1 |
Σ |
Σ |
\u03A3 |
\03A3 |
|
Τ |
Τ |
\u03A4 |
\03A4 |
Υ |
Υ |
\u03A5 |
\03A5 |
|
Φ |
Φ |
\u03A6 |
\03A6 |
Χ |
Χ |
\u03A7 |
\03A7 |
|
Ψ |
Ψ |
\u03A8 |
\03A8 |
Ω |
Ω |
\u03A9 |
\03A9 |
? 十字
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
☨ |
\u2628 |
\2628 |
? |
☩ |
\u2629 |
\2629 |
|
? |
✝ |
\u271D |
\271D |
? |
✞ |
\u271E |
\271E |
|
? |
✟ |
\u271F |
\271F |
? |
✠ |
\u2720 |
\2720 |
|
? |
✚ |
\u271A |
\271A |
? |
† |
\u2020 |
\2020 |
|
? |
✢ |
\u2722 |
\2722 |
? |
✤ |
\u2724 |
\2724 |
|
? |
✣ |
\u2723 |
\2723 |
? |
✥ |
\u2725 |
\2725 |
? 法律符号
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
® |
\u00AE |
\00AE |
? |
© |
\u00A9 |
\00A9 |
|
? |
℗ |
\u2117 |
\2117 |
? |
™ |
\u0099 |
\0099 |
|
? |
℠ |
\u2120 |
\2120 |
|
|
|
|
@ 标点和符号
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
« |
\u00AB |
\00AB |
? |
» |
\u00BB |
\00BB |
|
? |
‹ |
\u008B |
\008B |
? |
› |
\u009B |
\009B |
|
“ |
“ |
\u201C |
\201C |
” |
” |
\u201D |
\201D |
|
‘ |
‘ |
\u2018 |
\2018 |
’ |
’ |
\u2019 |
\2019 |
|
? |
• |
\u2022 |
\2022 |
? |
◦ |
\u25E6 |
\25E6 |
|
? |
¡ |
\u00A1 |
\00A1 |
? |
¿ |
\u00BF |
\00BF |
|
℅ |
℅ |
\u2105 |
\2105 |
№ |
№ |
\u2116 |
\2116 |
|
& |
& |
\u0026 |
\0026 |
@ |
@ |
\u0040 |
\0040 |
|
? |
℞ |
\u211E |
\211E |
℃ |
℃ |
\u2103 |
\2103 |
|
℉ |
℉ |
\u2109 |
\2109 |
° |
° |
\u00B0 |
\00B0 |
|
| |
| |
\u007C |
\007C |
| |
¦ |
\u00A6 |
\00A6 |
|
– |
– |
\u2013 |
\2013 |
— |
— |
\u2014 |
\2014 |
|
… |
… |
\u2026 |
\2026 |
? |
¶ |
\u00B6 |
\00B6 |
|
～ |
∼ |
\u223C |
\223C |
≠ |
≠ |
\u2260 |
\2260 |
3. 使用css绘制
举例：比如一个电话
很巧妙的应用一个div左border加圆角当机身，::before和::after配合圆角当听筒。
1 <style type="text/css"> 2 3 #phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;} 4 5 #phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;} 6 7 #phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;} 8 9 style> 10 11 <div id="wraper"> 12 <div id="phone">div> 13 div>
参考资料：
HTML特殊字符的html、js、css写法汇总
纯CSS GUI图标