如何在元素内容前后加图标
大家最常用作图标的元素是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>
参考资料:
下一篇: 字体图标网站---常用汇总
推荐阅读