当前元素前面添加html,如何在元素内容前后加图标

大家最常用作图标的元素是i标签，为什么呢？用 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写)；

比 短，但 gzip 后差异很小，不过打字可以少按三个键；

多数图标用的是空 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读(这样即使有特殊处理也跳过了)，机器理解起来应该也没什么影响。

综合来看，从实用性上暂时没看出有什么缺陷，所以目前用不用 取决于你对于遵循规范有多洁癖。

具体如何在元素内容前后添加图标呢？这就要用使用伪元素: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

HTMLJSCSSHTMLJSCSS

⇠u21E021E0⇢u21E221E2

⇡u21E121E1⇣u21E321E3

↞u219E219E↠u21A021A0

↟u219F219F↡u21A121A1

←u21902190→u21922192

↑u21912191↓u21932193

↔u21942194↕u21952195

⇄u21C421C4⇅u21C521C5

↢u21A221A2↣u21A321A3

⇞u21DE21DE⇟u21DF21DF

↫u21AB21AB↬u21AC21AC

⇜u21DC21DC⇝u21DD21DD

↚u219A219A↛u219B219B

↮u21AE21AE↭u21AD21AD

⇦u21E621E6⇨u21E821E8

⇧u21E721E7⇩u21E921E9

▲u25B225B2►u25BA25BA

▼u25BC25BC◄u25C425C4

➔u27942794➙u27992799

➨u27A827A8➲u27B227B2

➜u279C279C➞u279E279E

➟u279F279F➠u27A027A0

➤u27A427A4➥u27A527A5

➦u27A627A6➧u27A727A7

➵u27B527B5➸u27B827B8

➼u27BC27BC➽u27BD27BD

➺u27BA27BA➳u27B327B3

↷u21B721B7↶u21B621B6

↻u21BB21BB↺u21BA21BA

↵u21B521B5↯u21AF21AF

➾u27BE27BE

基本形状类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

❤u27642764✈u27082708

★u26052605✦u27262726

☀u26002600◆u25C625C6

◈u25C825C8▣u25A325A3

☻u263B263B☺u263A263A

☹u26392639✉u27092709

☎u260E260E☏u260F260F

✆u27062706��uFFFDFFFD

☁u26012601☂u26022602

❄u27442744☃u26032603

❈u27482748✿u273F273F

❀u27402740❁u27412741

☘u26182618❦u27662766

☕u97499749❂u27422742

☥u26252625☮u262E262E

☯u262F262F☪u262A262A

☤u26242624✄u27042704

✂u27022702☸u26382638

⚓u26932693☣u26232623

⚠u26A026A0⚡u26A126A1

☢u26222622♻u267B267B

♿u267F267F☠u26202620

¥  货币类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

$$u0024024¢¢u00A20A2

££u00A30A3¤¤u00A40A4

€€u20AC20AC¥¥u00A50A5

₱₱u20B120B1₹₹u20B920B9

½  数学类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

½½u00BD0BD¼¼u00BC0BC

¾¾u00BE0BE⅓⅓u21532153

⅔⅔u21542154⅛⅛u215B215B

⅜⅜u215C215C⅝⅝u215D215D

‰‰u20302030%%u0025025

>u003E03E

音乐符号类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

♩u26692669♪u266A266A

♫u266B266B♬u266C266C

♭u266D266D♯u266F266F

对错号符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

 u00A00A0☐u26102610

☑u26112611☒u26122612

✓u27132713✔u27142714

✕u1000510005✖u27162716

✗u27172717✘u27182718

全都是星星符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

★u26052605✭u272D272D

✮u272E272E☆u26062606

✪u272A272A✡u27212721

✯u272F272F✵u27352735

✶u27362736✸u27382738

✹u27392739✺u273A273A

✱u27312731✲u27322732

✴u27342734✳u27332733

✻u273B273B✽u273D273D

❋u274B274B❆u27462746

❄u27442744❅u27452745

星座类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

♈u26482648♉u26492649

♊u264A264A♋u264B264B

♌u264C264C♍u264D264D

♎u264E264E♏u264F264F

♐u26502650♑u26512651

♒u26522652♓u26532653

国际象棋类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

♚u265A265A♛u265B265B

♜u265C265C♝u265D265D

♞u265E265E♟u265F265F

♔u26542654♕u26552655

♖u26562656♗u26572657

♘u26582658♙u26592659

扑克牌类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

♠u26602660♣u26632663

♥u26652665♦u26662666

♤u26642664♧u26672667

♡u26612661♢u26622662

Ω  希腊字母符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

ΑΑu0391391ΒΒu0392392

ΓΓu0393393ΔΔu0394394

ΕΕu0395395ΖΖu0396396

ΗΗu0397397ΘΘu0398398

ΙΙu0399399ΚΚu039A39A

ΛΛu039B39BΜΜu039C39C

ΝΝu039D39DΞΞu039E39E

ΟΟu039F39FΠΠu03A03A0

ΡΡu03A13A1ΣΣu03A33A3

ΤΤu03A43A4ΥΥu03A53A5

ΦΦu03A63A6ΧΧu03A73A7

ΨΨu03A83A8ΩΩu03A93A9

十字符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

☨u26282628☩u26292629

✝u271D271D✞u271E271E

✟u271F271F✠u27202720

✚u271A271A††u20202020

✢u27222722✤u27242724

✣u27232723✥u27252725

©  法律符号符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

®®u00AE0AE©©u00A90A9

℗℗u21172117™u0099099

℠℠u21202120

@  标点和符号符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

««u00AB0AB»»u00BB0BB

‹u008B08B›u009B09B

““u201C201C””u201D201D

‘‘u20182018’’u20192019

••u20222022◦u25E625E6

¡¡u00A10A1¿¿u00BF0BF

℅℅u21052105№№u21162116

&&u0026026@@u0040040

℞℞u211E211E℃℃u21032103

℉℉u21092109°°u00B00B0

||u007C07C¦¦u00A60A6

––u20132013——u20142014

……u20262026¶¶u00B60B6

∼∼u223C223C≠≠u22602260

3.    使用css绘制

举例：比如一个电话

很巧妙的应用一个div左border加圆角当机身，::before和::after配合圆角当听筒。

#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;}

参考资料：

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