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

楚客追梦

发布于 2022-11-11 20:14:28

2.9K0

发布于 2022-11-11 20:14:28

之前折腾主题的时候感觉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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css

html

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

html

javascript

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

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

用法

注意

图标

各种箭头

形状

基本形状

标点

版权符号

货币

数学

音乐符号

对错

十字

星号和雪花

手势

天空

星座

棋牌

希腊字母

其它

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐