如何在元素内容前后加图标

　　 大家最常用作图标的元素是i标签，为什么呢？

1. 用 <i> 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写）；
2. <i> 比 <span> 短，但 gzip 后差异很小，不过打字可以少按三个键；
3. 多数图标用的是空 <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
⇠	&#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

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>

        

参考资料：

为什么大家都用i标签<i></i>用作小图标?

HTML特殊字符的html、js、css写法汇总

纯CSS GUI图标