大家最常用作圖標的元素是i標簽,為什麼呢? 綜合來看,從實用性上暫時沒看出有什麼缺陷,所以目前用不用 <i> 取決於你對於遵循規範有多潔癖。 具體如何在元素內容前後添加圖標呢?這就要用使用偽元素:before和after,語法: 1. 直接插入圖片 2. 使用特殊字元 2.1 語法 2.2 HTML ...
大家最常用作圖標的元素是i標簽,為什麼呢?
- 用 <i> 元素做圖標在語義上是不正確的(雖然看起來像 icon 的縮寫);
- <i> 比 <span> 短,但 gzip 後差異很小,不過打字可以少按三個鍵;
- 多數圖標用的是空 <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 |
||
⇠ |
⇠ |
\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 |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
❤ |
❤ |
\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 |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
$ |
$ |
\u0024 |
\0024 |
¢ |
¢ |
\u00A2 |
\00A2 |
£ |
£ |
\u00A3 |
\00A3 |
¤ |
¤ |
\u00A4 |
\00A4 |
€ |
€ |
\u20AC |
\20AC |
¥ |
¥ |
\u00A5 |
\00A5 |
₱ |
₱ |
\u20B1 |
\20B1 |
₹ |
₹ |
\u20B9 |
\20B9 |
½ 數學類
符號 |
UNICODE |
符號 |
UNICODE |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
½ |
½ |
\u00BD |
\00BD |
¼ |
¼ |
\u00BC |
\00BC |
¾ |
¾ |
\u00BE |
\00BE |
⅓ |
⅓ |
\u2153 |
\2153 |
⅔ |
⅔ |
\u2154 |
\2154 |
⅛ |
⅛ |
\u215B |
\215B |
⅜ |
⅜ |
\u215C |
\215C |
⅝ |
⅝ |
\u215D |
\215D |
‰ |
‰ |
\u2030 |
\2030 |
% |
% |
\u0025 |
\0025 |
< |
< |
\u003C |
\003C |
> |
> |
\u003E |
\003E |
♫ 音樂符號類
符號 |
UNICODE |
符號 |
UNICODE |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
♩ |
♩ |
\u2669 |
\2669 |
♪ |
♪ |
\u266A |
\266A |
♫ |
♫ |
\u266B |
\266B |
♬ |
♬ |
\u266C |
\266C |
♭ |
♭ |
\u266D |
\266D |
♯ |
♯ |
\u266F |
\266F |
✖ 對錯號
符號 |
UNICODE |
符號 |
UNICODE |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
  |
\u00A0 |
\00A0 |
☐ |
☐ |
\u2610 |
\2610 |
☑ |
☑ |
\u2611 |
\2611 |
☒ |
☒ |
\u2612 |
\2612 |
✓ |
✓ |
\u2713 |
\2713 |
✔ |
✔ |
\u2714 |
\2714 |
✕ |
✕ |
\u10005 |
\10005 |
✖ |
✖ |
\u2716 |
\2716 |
✗ |
✗ |
\u2717 |
\2717 |
✘ |
✘ |
\u2718 |
\2718 |
★ 全都是星星
符號 |
UNICODE |
符號 |
UNICODE |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
★ |
★ |
\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 |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
♈ |
♈ |
\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 |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
♚ |
♚ |
\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 |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
♠ |
♠ |
\u2660 |
\2660 |
♣ |
♣ |
\u2663 |
\2663 |
♥ |
♥ |
\u2665 |
\2665 |
♦ |
♦ |
\u2666 |
\2666 |
♤ |
♤ |
\u2664 |
\2664 |
♧ |
♧ |
\u2667 |
\2667 |
♡ |
♡ |
\u2661 |
\2661 |
♢ |
♢ |
\u2662 |
\2662 |
Ω 希臘字母
符號 |
UNICODE |
符號 |
UNICODE |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
Α |
Α |
\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 |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
☨ |
☨ |
\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 |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
® |
® |
\u00AE |
\00AE |
© |
© |
\u00A9 |
\00A9 |
℗ |
℗ |
\u2117 |
\2117 |
™ |
™ |
\u0099 |
\0099 |
℠ |
℠ |
\u2120 |
\2120 |
|
|
|
|
@ 標點和符號
符號 |
UNICODE |
符號 |
UNICODE |
||||
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
« |
« |
\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配合圓角當聽筒。
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