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

Posted 2021-02-10 yscit

　　 大家最常用作图标的元素是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	024	￠	&#162	u00A2	0A2
￡	&#163	u00A3	0A3	¤	&#164	u00A4	0A4
€	&#8364	u20AC	20AC	￥	&#165	u00A5	0A5
?	&#8369	u20B1	20B1	?	&#8377	u20B9	20B9

?  数学类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
?	&#189	u00BD	0BD	?	&#188	u00BC	0BC
?	&#190	u00BE	0BE	?	&#8531	u2153	2153
?	&#8532	u2154	2154	?	&#8539	u215B	215B
?	&#8540	u215C	215C	?	&#8541	u215D	215D
‰	&#8240	u2030	2030	%	&#37	u0025	025
<	&#60	u003C	03C	>	&#62	u003E	03E

?  音乐符号类

符号	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	0A0	?	&#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	391	Β	&#914	u0392	392
Γ	&#915	u0393	393	Δ	&#916	u0394	394
Ε	&#917	u0395	395	Ζ	&#918	u0396	396
Η	&#919	u0397	397	Θ	&#920	u0398	398
Ι	&#921	u0399	399	Κ	&#922	u039A	39A
Λ	&#923	u039B	39B	Μ	&#924	u039C	39C
Ν	&#925	u039D	39D	Ξ	&#926	u039E	39E
Ο	&#927	u039F	39F	Π	&#928	u03A0	3A0
Ρ	&#929	u03A1	3A1	Σ	&#931	u03A3	3A3
Τ	&#932	u03A4	3A4	Υ	&#933	u03A5	3A5
Φ	&#934	u03A6	3A6	Χ	&#935	u03A7	3A7
Ψ	&#936	u03A8	3A8	Ω	&#937	u03A9	3A9

?  十字

符号	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	0AE	?	&#169	u00A9	0A9
?	&#8471	u2117	2117	?	&#153	u0099	099
?	&#8480	u2120	2120

@  标点和符号

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
?	&#171	u00AB	0AB	?	&#187	u00BB	0BB
?	&#139	u008B	08B	?	&#155	u009B	09B
“	&#8220	u201C	201C	”	&#8221	u201D	201D
‘	&#8216	u2018	2018	’	&#8217	u2019	2019
?	&#8226	u2022	2022	?	&#9702	u25E6	25E6
?	&#161	u00A1	0A1	?	&#191	u00BF	0BF
℅	&#8453	u2105	2105	№	&#8470	u2116	2116
&	&#38	u0026	026	@	&#64	u0040	040
?	&#8478	u211E	211E	℃	&#8451	u2103	2103
℉	&#8457	u2109	2109	°	&#176	u00B0	0B0
|	&#124	u007C	07C	|	&#166	u00A6	0A6
–	&#8211	u2013	2013	—	&#8212	u2014	2014
…	&#8230	u2026	2026	?	&#182	u00B6	0B6
～	&#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图标