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

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

 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图标

 

posted @ 2019-02-22 20:41  yscit  阅读(772)  评论(0)  编辑  收藏  举报