常用的HTML和CSS(content)特殊字符图标

之前折腾主题的时候感觉Font Awesome太过庞大,好多图标字体基本都用不上,加载起来太慢了,于是自己折腾了一套简单的图标字体,但在完善主题过程中才发现字体太少不够用(有些图标当时没想到),重新折腾又要重新来一次太麻烦。于是想到可以用css的content,通过伪元素将一些符合的unicode字符集插入其中。

特殊字符太多,怎么可能记得住,在BD搜索之后进行合并归纳备忘。

用法

通过伪元素:before:after在内容前后插入图标。

css

.example:before {
   content:'\00AB';
    …
}
.example:after {
   content:'\00BB';
    …
}

注意

这些字符属于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
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
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
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
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

其它

图形样式 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
写于2022年10月20日
酸甜苦辣咸,五味调和,共存相生,百味纷呈。

赞助 点赞 0

牧羊人, 腾讯云开发者社区, XI, 阿和等人对本文发表了9条热情洋溢的评论。
  • 牧羊人说道:
    边栏的网站目录是系统自带的?
    1. 老王说道:
      回复 牧羊人: 自己折腾的😀
  • 腾讯云开发者社区说道:
    您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan?invite_code=342z16y4r5kwg 作者申请此计划后将作者的文章进行搬迁同步到社区的专栏下,你只需要简单填写一下表单申请即可,我们会给作者提供包括流量、云服务器等,另外还有些周边礼物。
  • XI说道:
    使用iconfont吧,可以自建项目,可以使用AI设计SVG后上传生成,也可以直接搜索使用现有的图标,新增或删除直接在私有项目上操作,下载对应的css和字体更新即可。
    1. 老王说道:
      回复 XI: 我用的IcoMoon,功能好像差不多吧!😀
  • 阿和说道:
    这不是emoji表情吗?
    1. 老王说道:
      回复 阿和: 貌似emoji表情也是由unicode字符组成的。。。
      1. 阿和说道:
        回复 老王: 对啊,我站上的表情就是字符来着
        1. 老王说道:
          回复 阿和: 你那个太不智能了,应该让表情跟随评论框。。。
  • 发表回复

    您的电子邮箱地址不会被公开。 必填项已用 * 标注