如何在元素内容前后加图标
大家最常用作图标的元素是i标签，为什么呢？
- 用 <i> 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写）；
- <i> 比 <span> 短，但 gzip 后差异很小，不过打字可以少按三个键；
- 多数图标用的是空 <i> 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读（这样即使有特殊处理也跳过了），机器理解起来应该也没什么影响。
综合来看，从实用性上暂时没看出有什么缺陷，所以目前用不用 <i> 取决于你对于遵循规范有多洁癖。
具体如何在元素内容前后添加图标呢？这就要用使用伪元素: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>
参考资料：
上一篇： 日本创办无人机界的“蓝翔技校”
下一篇： 鱼腥草哪里有？有哪些营养？
推荐阅读