摘要：综合来看，从实用性上暂时没看出有什么缺陷，所以目前用不用取决于你对于遵循规范有多洁癖。
大家最常用作图标的元素是i标签，为什么呢？
综合来看，从实用性上暂时没看出有什么缺陷，所以目前用不用 取决于你对于遵循规范有多洁癖。
具体如何在元素内容前后添加图标呢？这就要用使用伪元素:before和after，语法：
cssSelector:before{…} cssSelector.after{…}
#example:before { content:url(imgUrl); … }
#example:before { content:”21E0”; … }
|
符号 |
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 |
024 |
¢ |
¢ |
u00A2 |
0A2 |
|
£ |
£ |
u00A3 |
0A3 |
¤ |
¤ |
u00A4 |
0A4 |
|
€ |
€ |
u20AC |
20AC |
¥ |
¥ |
u00A5 |
0A5 |
|
₱ |
₱ |
u20B1 |
20B1 |
₹ |
₹ |
u20B9 |
20B9 |
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
½ |
½ |
u00BD |
0BD |
¼ |
¼ |
u00BC |
0BC |
|
¾ |
¾ |
u00BE |
0BE |
⅓ |
⅓ |
u2153 |
2153 |
|
⅔ |
⅔ |
u2154 |
2154 |
⅛ |
⅛ |
u215B |
215B |
|
⅜ |
⅜ |
u215C |
215C |
⅝ |
⅝ |
u215D |
215D |
|
‰ |
‰ |
u2030 |
2030 |
% |
% |
u0025 |
025 |
|
< |
< |
u003C |
03C |
> |
> |
u003E |
03E |
|
符号 |
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 |
0A0 |
☐ |
☐ |
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 |
391 |
Β |
Β |
u0392 |
392 |
|
Γ |
Γ |
u0393 |
393 |
Δ |
Δ |
u0394 |
394 |
|
Ε |
Ε |
u0395 |
395 |
Ζ |
Ζ |
u0396 |
396 |
|
Η |
Η |
u0397 |
397 |
Θ |
Θ |
u0398 |
398 |
|
Ι |
Ι |
u0399 |
399 |
Κ |
Κ |
u039A |
39A |
|
Λ |
Λ |
u039B |
39B |
Μ |
Μ |
u039C |
39C |
|
Ν |
Ν |
u039D |
39D |
Ξ |
Ξ |
u039E |
39E |
|
Ο |
Ο |
u039F |
39F |
Π |
Π |
u03A0 |
3A0 |
|
Ρ |
Ρ |
u03A1 |
3A1 |
Σ |
Σ |
u03A3 |
3A3 |
|
Τ |
Τ |
u03A4 |
3A4 |
Υ |
Υ |
u03A5 |
3A5 |
|
Φ |
Φ |
u03A6 |
3A6 |
Χ |
Χ |
u03A7 |
3A7 |
|
Ψ |
Ψ |
u03A8 |
3A8 |
Ω |
Ω |
u03A9 |
3A9 |
|
符号 |
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 |
0AE |
© |
© |
u00A9 |
0A9 |
|
℗ |
℗ |
u2117 |
2117 |
™ |
™ |
u0099 |
099 |
|
℠ |
℠ |
u2120 |
2120 |
|
|
|
|
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
« |
« |
u00AB |
0AB |
» |
» |
u00BB |
0BB |
|
‹ |
‹ |
u008B |
08B |
› |
› |
u009B |
09B |
|
“ |
“ |
u201C |
201C |
” |
” |
u201D |
201D |
|
‘ |
‘ |
u2018 |
2018 |
’ |
’ |
u2019 |
2019 |
|
• |
• |
u2022 |
2022 |
◦ |
◦ |
u25E6 |
25E6 |
|
¡ |
¡ |
u00A1 |
0A1 |
¿ |
¿ |
u00BF |
0BF |
|
℅ |
℅ |
u2105 |
2105 |
№ |
№ |
u2116 |
2116 |
|
& |
& |
u0026 |
026 |
@ |
@ |
u0040 |
040 |
|
℞ |
℞ |
u211E |
211E |
℃ |
℃ |
u2103 |
2103 |
|
℉ |
℉ |
u2109 |
2109 |
° |
° |
u00B0 |
0B0 |
|
| |
| |
u007C |
07C |
¦ |
¦ |
u00A6 |
0A6 |
|
– |
– |
u2013 |
2013 |
— |
— |
u2014 |
2014 |
|
… |
… |
u2026 |
2026 |
¶ |
¶ |
u00B6 |
0B6 |
|
∼ |
∼ |
u223C |
223C |
≠ |
≠ |
u2260 |
2260 |
举例：比如一个电话
很巧妙的应用一个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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1199.html
摘要：最近在看张鑫旭的世界看了这个书感觉打开了世界的大门建议前端工程师人手一本针对字符内容生成这一技术用的最多的应该就是配合实现字体图标了吧因为就运用了这一技术进入之后默认是点击红线里面就是连接了可以直接打开看到源码与上面所写无二在 最近在看张鑫旭的《css世界》, 看了这个书感觉打开了css世界的大门. 建议前端工程师人手一本 针对content 字符内容生成 这一技术用的最多的应该就是...
摘要：本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对小程序中的动画音频等踩坑做出解决方案。 背景 一个交互不复杂，对刷新频率和动画效果要求不高的小游戏，不需要使用canvas主导的解决方案，使用dom操作一样可以完成。节省了cocos creater的学习成本，值得一试。本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对...
阅读 1464·2021-11-24 11:16
阅读 2647·2021-07-28 12:32
阅读 2283·2019-08-30 11:22
阅读 1425·2019-08-30 11:01
阅读 560·2019-08-29 16:24
阅读 3507·2019-08-29 12:52
阅读 1608·2019-08-29 12:15
阅读 1314·2019-08-29 11:18
