当前元素前面添加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

⇠\u21E0\21E0⇢\u21E2\21E2

⇡\u21E1\21E1⇣\u21E3\21E3

↞\u219E\219E↠\u21A0\21A0

↟\u219F\219F↡\u21A1\21A1

←\u2190\2190→\u2192\2192

↑\u2191\2191↓\u2193\2193

↔\u2194\2194↕\u2195\2195

⇄\u21C4\21C4⇅\u21C5\21C5

↢\u21A2\21A2↣\u21A3\21A3

⇞\u21DE\21DE⇟\u21DF\21DF

↫\u21AB\21AB↬\u21AC\21AC

⇜\u21DC\21DC⇝\u21DD\21DD

↚\u219A\219A↛\u219B\219B

↮\u21AE\21AE↭\u21AD\21AD

⇦\u21E6\21E6⇨\u21E8\21E8

⇧\u21E7\21E7⇩\u21E9\21E9

▲\u25B2\25B2►\u25BA\25BA

▼\u25BC\25BC◄\u25C4\25C4

➔\u2794\2794➙\u2799\2799

➨\u27A8\27A8➲\u27B2\27B2

➜\u279C\279C➞\u279E\279E

➟\u279F\279F➠\u27A0\27A0

➤\u27A4\27A4➥\u27A5\27A5

➦\u27A6\27A6➧\u27A7\27A7

➵\u27B5\27B5➸\u27B8\27B8

➼\u27BC\27BC➽\u27BD\27BD

➺\u27BA\27BA➳\u27B3\27B3

↷\u21B7\21B7↶\u21B6\21B6

↻\u21BB\21BB↺\u21BA\21BA

↵\u21B5\21B5↯\u21AF\21AF

➾\u27BE\27BE

基本形状类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

❤\u2764\2764✈\u2708\2708

★\u2605\2605✦\u2726\2726

☀\u2600\2600◆\u25C6\25C6

◈\u25C8\25C8▣\u25A3\25A3

☻\u263B\263B☺\u263A\263A

☹\u2639\2639✉\u2709\2709

☎\u260E\260E☏\u260F\260F

✆\u2706\2706��\uFFFD\FFFD

☁\u2601\2601☂\u2602\2602

❄\u2744\2744☃\u2603\2603

❈\u2748\2748✿\u273F\273F

❀\u2740\2740❁\u2741\2741

☘\u2618\2618❦\u2766\2766

☕\u9749\9749❂\u2742\2742

☥\u2625\2625☮\u262E\262E

☯\u262F\262F☪\u262A\262A

☤\u2624\2624✄\u2704\2704

✂\u2702\2702☸\u2638\2638

⚓\u2693\2693☣\u2623\2623

⚠\u26A0\26A0⚡\u26A1\26A1

☢\u2622\2622♻\u267B\267B

♿\u267F\267F☠\u2620\2620

¥  货币类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

$$\u0024\0024¢¢\u00A2\00A2

££\u00A3\00A3¤¤\u00A4\00A4

€€\u20AC\20AC¥¥\u00A5\00A5

₱₱\u20B1\20B1₹₹\u20B9\20B9

½  数学类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

½½\u00BD\00BD¼¼\u00BC\00BC

¾¾\u00BE\00BE⅓⅓\u2153\2153

⅔⅔\u2154\2154⅛⅛\u215B\215B

⅜⅜\u215C\215C⅝⅝\u215D\215D

‰‰\u2030\2030%%\u0025\0025

>\u003E\003E

音乐符号类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

♩\u2669\2669♪\u266A\266A

♫\u266B\266B♬\u266C\266C

♭\u266D\266D♯\u266F\266F

对错号符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

 \u00A0\00A0☐\u2610\2610

☑\u2611\2611☒\u2612\2612

✓\u2713\2713✔\u2714\2714

✕\u10005\10005✖\u2716\2716

✗\u2717\2717✘\u2718\2718

全都是星星符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

★\u2605\2605✭\u272D\272D

✮\u272E\272E☆\u2606\2606

✪\u272A\272A✡\u2721\2721

✯\u272F\272F✵\u2735\2735

✶\u2736\2736✸\u2738\2738

✹\u2739\2739✺\u273A\273A

✱\u2731\2731✲\u2732\2732

✴\u2734\2734✳\u2733\2733

✻\u273B\273B✽\u273D\273D

❋\u274B\274B❆\u2746\2746

❄\u2744\2744❅\u2745\2745

星座类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

♈\u2648\2648♉\u2649\2649

♊\u264A\264A♋\u264B\264B

♌\u264C\264C♍\u264D\264D

♎\u264E\264E♏\u264F\264F

♐\u2650\2650♑\u2651\2651

♒\u2652\2652♓\u2653\2653

国际象棋类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

♚\u265A\265A♛\u265B\265B

♜\u265C\265C♝\u265D\265D

♞\u265E\265E♟\u265F\265F

♔\u2654\2654♕\u2655\2655

♖\u2656\2656♗\u2657\2657

♘\u2658\2658♙\u2659\2659

扑克牌类符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

♠\u2660\2660♣\u2663\2663

♥\u2665\2665♦\u2666\2666

♤\u2664\2664♧\u2667\2667

♡\u2661\2661♢\u2662\2662

Ω  希腊字母符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

ΑΑ\u0391\0391ΒΒ\u0392\0392

ΓΓ\u0393\0393ΔΔ\u0394\0394

ΕΕ\u0395\0395ΖΖ\u0396\0396

ΗΗ\u0397\0397ΘΘ\u0398\0398

ΙΙ\u0399\0399ΚΚ\u039A\039A

ΛΛ\u039B\039BΜΜ\u039C\039C

ΝΝ\u039D\039DΞΞ\u039E\039E

ΟΟ\u039F\039FΠΠ\u03A0\03A0

ΡΡ\u03A1\03A1ΣΣ\u03A3\03A3

ΤΤ\u03A4\03A4ΥΥ\u03A5\03A5

ΦΦ\u03A6\03A6ΧΧ\u03A7\03A7

ΨΨ\u03A8\03A8ΩΩ\u03A9\03A9

十字符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

☨\u2628\2628☩\u2629\2629

✝\u271D\271D✞\u271E\271E

✟\u271F\271F✠\u2720\2720

✚\u271A\271A††\u2020\2020

✢\u2722\2722✤\u2724\2724

✣\u2723\2723✥\u2725\2725

©  法律符号符号UNICODE符号UNICODE

HTMLJSCSSHTMLJSCSS

®®\u00AE\00AE©©\u00A9\00A9

℗℗\u2117\2117™\u0099\0099

℠℠\u2120\2120

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

HTMLJSCSSHTMLJSCSS

««\u00AB\00AB»»\u00BB\00BB

‹\u008B\008B›\u009B\009B

““\u201C\201C””\u201D\201D

‘‘\u2018\2018’’\u2019\2019

••\u2022\2022◦\u25E6\25E6

¡¡\u00A1\00A1¿¿\u00BF\00BF

℅℅\u2105\2105№№\u2116\2116

&&\u0026\0026@@\u0040\0040

℞℞\u211E\211E℃℃\u2103\2103

℉℉\u2109\2109°°\u00B0\00B0

||\u007C\007C¦¦\u00A6\00A6

––\u2013\2013——\u2014\2014

……\u2026\2026¶¶\u00B6\00B6

∼∼\u223C\223C≠≠\u2260\2260

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