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

 大家最常用作图标的元素是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配合圆角当听筒。

 <style type="text/css"> 
 #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;} 
 #phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;} 
#phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;} 
</style>
 <div id="wraper"> 
<div id="phone"></div>
</div>

        

参考资料：

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

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

纯CSS GUI图标

作者：yscit

原文链接：https://www.cnblogs.com/yscit/p/10420586.html