CSS的content属性,加入一些特殊字符来实现网页效果

今天在做开发的时候,需要用到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 03A9

转自:https://blog.csdn.net/zx562602419/article/details/81020342

原文地址:https://www.cnblogs.com/dayin1/p/13902737.html