为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html/CSS

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

 <style type="text/css"> 
 #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;} 
</style>
 <div id="wraper"> 
<div id="phone"></div>
</div>

        

参考资料:

为什么大家都用i标签<i></i>用作小图标?

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

纯CSS GUI图标

作者:yscit

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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消