需要用到CSS的content属性,加入一些特殊字符来实现网页效果
因为这些字符属于unicode字符集,所以,我们在使用的时候需要将添加这些字符的代码声明为UTF-8格式;
还有一点需要注意的是,部分字符在不同浏览器中显示的效果不同,所以在使用的时候,需要自己在不同的浏览器中进行试验。在苹果和安卓等系统的智能设备下的识别度也比较差,所有希望慎用。
各种箭头
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
8672 |
21E0 |
| ? |
8674 |
21E2 |
| ? |
8673 |
21E1 |
| ? |
8675 |
21E3 |
| ? |
8606 |
219E |
| ? |
8608 |
21A0 |
| ? |
8607 |
219F |
| ? |
8609 |
21A1 |
| ← |
8592 |
2190 |
| → |
8594 |
2192 |
| ↑ |
8593 |
2191 |
| ↓ |
8595 |
2193 |
| ? |
8596 |
2194 |
| ? |
8597 |
2195 |
| ? |
8644 |
21C4 |
| ? |
8645 |
21C5 |
| ? |
8610 |
21A2 |
| ? |
8611 |
21A3 |
| ? |
8670 |
21DE |
| ? |
8671 |
21DF |
| ? |
8619 |
21AB |
| ? |
8620 |
21AC |
| ? |
8668 |
21DC |
| ? |
8669 |
21DD |
| ? |
8602 |
219A |
| ? |
8603 |
219B |
| ? |
8622 |
21AE |
| ? |
8621 |
21AD |
形状
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
8678 |
21E6 |
| ? |
8680 |
21E8 |
| ? |
8679 |
21E7 |
| ? |
8681 |
21E9 |
| ? |
8631 |
21B7 |
| ? |
8630 |
21B6 |
| ? |
8635 |
21BB |
| ? |
8634 |
21BA |
| ? |
10227 |
27F3 |
| ? |
10226 |
27F2 |
| ? |
10224 |
27F0 |
| ? |
10225 |
27F1 |
| ? |
8629 |
21B5 |
| ? |
8623 |
21AF |
| ? |
8693 |
21F5 |
向右的箭头
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
10132 |
2794 |
| ? |
10137 |
2799 |
| ? |
10152 |
27A8 |
| ? |
10162 |
27B2 |
| ? |
10140 |
279C |
| ? |
10142 |
279E |
| ? |
10143 |
279F |
| ? |
10144 |
27A0 |
| ? |
10148 |
27A4 |
| ? |
10149 |
27A5 |
| ? |
10150 |
27A6 |
| ? |
10151 |
27A7 |
| ? |
10165 |
27B5 |
| ? |
10168 |
27B8 |
| ? |
10172 |
27BC |
| ? |
10173 |
27BD |
| ? |
10170 |
27BA |
| ? |
10163 |
27B3 |
| ? |
10174 |
27BE |
基本形状
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ▲ |
9650 |
25B2 |
| ? |
9658 |
25BA |
| ▼ |
9660 |
25BC |
| ? |
9668 |
25C4 |
| ? |
10084 |
2764 |
| ? |
9992 |
2708 |
| ★ |
9733 |
2605 |
| ? |
10022 |
2726 |
| ? |
9728 |
2600 |
| ◆ |
9670 |
25C6 |
| ? |
9672 |
25C8 |
| ? |
9635 |
25A3 |
标点
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
171 |
00AB |
| ? |
187 |
00BB |
| ? |
139 |
008B |
| ? |
155 |
009B |
| “ |
8220 |
201C |
| ” |
8221 |
201D |
| ‘ |
8216 |
2018 |
| ’ |
8217 |
2019 |
| ? |
8226 |
2022 |
| ? |
9702 |
25E6 |
| ? |
161 |
00A1 |
| ? |
191 |
00BF |
| ℅ |
8453 |
2105 |
| № |
8470 |
2116 |
| & |
38 |
0026 |
| @ |
64 |
0040 |
| ? |
8478 |
211E |
| ℃ |
8451 |
2103 |
| ℉ |
8457 |
2109 |
| ° |
176 |
00B0 |
| |
124 |
007C |
| | |
166 |
00A6 |
| – |
8211 |
2013 |
| — |
8212 |
2014 |
| … |
8230 |
2026 |
| ? |
182 |
00B6 |
| ~ |
8764 |
223C |
| ≠ |
8800 |
2260 |
法律符号
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
174 |
00AE |
| ? |
169 |
00A9 |
| ? |
8471 |
2117 |
| ? |
153 |
0099 |
| ? |
8480 |
2120 |
货币
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| $ |
36 |
0024 |
| ¢ |
162 |
00A2 |
| £ |
163 |
00A3 |
| ¤ |
164 |
00A4 |
| € |
8364 |
20AC |
| ¥ |
165 |
00A5 |
| ? |
8369 |
20B1 |
| ? |
8377 |
20B9 |
数学
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
189 |
00BD |
| ? |
188 |
00BC |
| ? |
190 |
00BE |
| ? |
8531 |
2153 |
| ? |
8532 |
2154 |
| ? |
8539 |
215B |
| ? |
8540 |
215C |
| ? |
8541 |
215D |
| ‰ |
8240 |
2030 |
| % |
37 |
0025 |
| < |
60 |
003C |
| > |
62 |
003E |
音乐符号
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
9833 |
2669 |
| ? |
9834 |
266A |
| ? |
9835 |
266B |
| ? |
9836 |
266C |
| ? |
9837 |
266D |
| ? |
9839 |
266F |
对号、错号
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| 空格 |
160 |
00A0 |
| ? |
9744 |
2610 |
| ? |
9745 |
2611 |
| ? |
9746 |
2612 |
| ? |
10003 |
2713 |
| ? |
10004 |
2714 |
| ? |
10005 |
10005 |
| ? |
10006 |
2716 |
| ? |
10007 |
2717 |
| ? |
10008 |
2718 |
十字
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
9768 |
2628 |
| ? |
9769 |
2629 |
| ? |
10013 |
271D |
| ? |
10014 |
271E |
| ? |
10015 |
271F |
| ? |
10016 |
2720 |
| ? |
10010 |
271A |
| ? |
8224 |
2020 |
| ? |
10018 |
2722 |
| ? |
10020 |
2724 |
| ? |
10019 |
2723 |
| ? |
10021 |
2725 |
星星、星号、雪花
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ★ |
9733 |
2605 |
| ? |
10029 |
272D |
| ? |
10030 |
272E |
| ☆ |
9734 |
2606 |
| ? |
10026 |
272A |
| ? |
10017 |
2721 |
| ? |
10031 |
272F |
| ? |
10037 |
2735 |
| ? |
10038 |
2736 |
| ? |
10040 |
2738 |
| ? |
10041 |
2739 |
| ? |
10042 |
273A |
| ? |
10033 |
2731 |
| ? |
10034 |
2732 |
| ? |
10036 |
2734 |
| ? |
10035 |
2733 |
| ? |
10043 |
273B |
| ? |
10045 |
273D |
| ? |
10059 |
274B |
| ? |
10054 |
2746 |
| ? |
10052 |
2744 |
| ? |
10053 |
2745 |
杂项
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
9787 |
263B |
| ? |
9786 |
263A |
| ? |
9785 |
2639 |
| ? |
9993 |
2709 |
| ? |
9742 |
260E |
| ? |
9743 |
260F |
| ? |
9990 |
2706 |
| ? |
65533 |
FFFD |
| ? |
9729 |
2601 |
| ? |
9730 |
2602 |
| ? |
10052 |
2744 |
| ? |
9731 |
2603 |
| ? |
10056 |
2748 |
| ? |
10047 |
273F |
| ? |
10048 |
2740 |
| ? |
10049 |
2741 |
| ? |
9752 |
2618 |
| ? |
10086 |
2766 |
| ? |
9749 |
9749 |
| ? |
10050 |
2742 |
| ? |
9765 |
2625 |
| ? |
9774 |
262E |
| ? |
9775 |
262F |
| ? |
9770 |
262A |
| ? |
9764 |
2624 |
| ? |
9988 |
2704 |
| ? |
9986 |
2702 |
| ? |
9784 |
2638 |
| ? |
9875 |
2693 |
| ? |
9763 |
2623 |
| ? |
9888 |
26A0 |
| ? |
9889 |
26A1 |
| ? |
9762 |
2622 |
| ? |
9851 |
267B |
| ? |
9855 |
267F |
| ? |
9760 |
2620 |
手型、铅笔、笔
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
9756 |
261C |
| ? |
9758 |
261E |
| ? |
9757 |
261D |
| ? |
9759 |
261F |
| ? |
9996 |
270C |
| ? |
9997 |
270D |
| ? |
9998 |
270E |
| ? |
10000 |
2710 |
| ? |
9999 |
270F |
| ? |
10001 |
2711 |
| ? |
10002 |
2712 |
天空、植物
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
9789 |
263D |
| ? |
9790 |
263E |
| ♂ |
9794 |
2642 |
| ♀ |
9792 |
2640 |
| ? |
9791 |
263F |
| ? |
9793 |
2641 |
| ? |
9795 |
2643 |
| ? |
9796 |
2644 |
| ? |
9797 |
2645 |
| ? |
9798 |
2646 |
| ? |
9799 |
2647 |
星座
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
9800 |
2648 |
| ? |
9801 |
2649 |
| ? |
9802 |
264A |
| ? |
9803 |
264B |
| ? |
9804 |
264C |
| ? |
9805 |
264D |
| ? |
9806 |
264E |
| ? |
9807 |
264F |
| ? |
9809 |
2651 |
| ? |
9810 |
2652 |
| ? |
9811 |
2653 |
象棋,扑克牌
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| ? |
9818 |
265A |
| ? |
9819 |
265B |
| ? |
9820 |
265C |
| ? |
9821 |
265D |
| ? |
9822 |
265E |
| ? |
9823 |
265F |
| ? |
9812 |
2654 |
| ? |
9813 |
2655 |
| ? |
9814 |
2656 |
| ? |
9815 |
2657 |
| ? |
9816 |
2658 |
| ? |
9817 |
2659 |
| ? |
9824 |
2660 |
| ? |
9827 |
2663 |
| ? |
9829 |
2665 |
| ? |
9830 |
2666 |
| ? |
9828 |
2664 |
| ? |
9831 |
2667 |
| ? |
9825 |
2661 |
| ? |
9826 |
2662 |
希腊字母
| 图形样式 |
用于HTML(在字符前加 ) |
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u ) |
| Α |
913 |
0391 |
| Β |
914 |
0392 |
| Γ |
915 |
0393 |
| Δ |
916 |
0394 |
| Ε |
917 |
0395 |
| Ζ |
918 |
0396 |
| Η |
919 |
0397 |
| Θ |
920 |
0398 |
| Ι |
921 |
0399 |
| Κ |
922 |
039A |
| Λ |
923 |
039B |
| Μ |
924 |
039C |
| Ν |
925 |
039D |
| Ξ |
926 |
039E |
| Ο |
927 |
039F |
| Π |
928 |
03A0 |
| Ρ |
929 |
03A1 |
| Σ |
931 |
03A3 |
| Τ |
932 |
03A4 |
| Υ |
933 |
03A5 |
| Φ |
934 |
03A6 |
| Χ |
935 |
03A7 |
| Ψ |
936 |
03A8 |
| Ω |
937 |
|