ITPub博客

首页博客专栏学院社区 IT新媒体评选

发博

首页 > IT职业 > IT生活 > 如何在元素内容前后加图标

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

IT生活作者：rainbows 时间：2021-09-09 10:25:38 0 删除编辑

大家最常用作图标的元素是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
	&#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

来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/2442/viewspace-2821888/ ，如需转载，请注明出处，否则将追究法律责任。

上一篇：手把手教你构建一个web前端项目，全网最详细教程！

下一篇：《币圈笔记》第281期：迟到的升级

请登录后发表评论登录

全部评论

注册时间：2019-08-15

博文量
112
访问量

1269

最新文章

北京盛拓优讯信息技术有限公司. 版权所有京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号中国互联网协会会员

违法和不良信息举报电话:18101376593