如何在元素內容前後加圖標

来源:https://www.cnblogs.com/yscit/archive/2019/02/22/10420586.html
-Advertisement-
Play Games

大家最常用作圖標的元素是i標簽,為什麼呢? 綜合來看,從實用性上暫時沒看出有什麼缺陷,所以目前用不用 <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
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 高效的選擇和使用索引有很多方式,有的是針對特殊案例的優化方法,有的則是針對特定行為的優化,使用哪個索引,以及如何評估選擇不同索引的性能影響的技巧,則需要持續不斷地學習。(本文章需要一定索引基礎) 1.索引要是獨立的列 “獨立的列”是指索引列不能是表達式的一部分,也不能是函數的參數。例如,下麵這個查詢 ...
  • 前言: 在iOS開發中,或多或少的會嵌入一些H5頁面,有時候需要原生代碼和H5頁面進行交互。iOS8開始蘋果推出性能更強大的WKWebView,所以一下方法是關於WKWebView與JS的交互。 創建WKWebView: 遵守協議 <WKNavigationDelegate, WKUIDelegat ...
  • Tablayout的使用 屬性 |屬性名 | 說明| | | | |app:tabMod |設置Tab模式 | |app:tabTextColor |設置文本顏色 | |app:tabSelectedTextColor |設置選中文本顏色 | |app:tabIndicatorColor |設置下滑 ...
  • 資料參考: 組合測試設計PK正交設計總結:https://www.testwo.com/blog/6376 組合測試工具集:http://www.pairwise.org/tools.asp 組合測試方法-配對測試實踐:https://www.cnblogs.com/leeboke/p/503589 ...
  • 關於使用SQLiteOpenHelper的使用,對於小白的我,百度啦相當多的大神的介紹,均未能讓我這新手(零基礎)成功學會,參考了http://www.cnblogs.com/yaozhenfa/p/xamarin_android_sqliteopenhelper.html,我成功實驗出我的第一個登 ...
  • 在本節中,註意到三維底圖既加入了行政邊界的矢量要素圖層,也加入了場景要素 var countries = new FeatureLayer({ //各國矢量邊界 url:"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/service ...
  • Web前端JQuery面試題(三) 1.怎麼阻止冒泡過程? 2. 方法和 方法的區別? 方法要等頁面中全部元素載入到瀏覽器中才執行,如果頁面中存在大量圖片,要等這些內容載入完畢。 方法只要頁面的 模型載入完畢即可,就會觸發 。 3.請寫出 相同方法? 4. 方法綁定事件有瞭解嗎? 5.寫出一個映射方 ...
  • 基於 jquery 的插件 turn.js 學習筆記 簡介 turn.js是一個可以實現3d書籍展示效果的jq插件,使用html5和css3來執行效果。可以很好的適應於ios和安卓等觸摸設備。 ___ How it works? 下麵是官網展示的最簡單的一個應用實例 1.編寫html部分 2.編寫j ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...