欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-25 19:47:50
大家最常用作图标的元素是i标签,为什么呢? 综合来看,从实用性上暂时没看出有什么缺陷,所以目前用不用 取决于你对于遵循规范有多洁癖。 具体如何在元素内容前后添加图标呢?这就要用使用伪元素:before和after,语法: 1. 直接插入图片 2. 使用特殊字符 2.1 语法 2.2 HTML ......

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

        

参考资料:

html特殊字符的html、js、css写法汇总

纯css gui图标