好玩的css小图标

发表于 | 更新于

https://css-tricks.com/snippets/html/glyphs/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <title></title>
  <style>
    span:nth-child(1):after {
      content: "\0026";
    }

    span:nth-child(2):after {
      content: "\003c";
    }

    span:nth-child(3):after {
      content: "\003e";
    }

    span:nth-child(4):after {
      content: "\00a5";
    }

    span:nth-child(5):after {
      content: "\00a9";
    }

    span:nth-child(6):after {
      content: "\00ab";
    }

    span:nth-child(7):after {
      content: "\00bb";
    }

    span:nth-child(8):after {
      content: "\00ae";
    }

    span:nth-child(9):after {
      content: "\00b1";
    }

    span:nth-child(9):after {
      content: "\00d7";
    }

    span:nth-child(10):after {
      content: "\2660";
    }

    span:nth-child(11):after {
      content: "\2663";
    }

    span:nth-child(12):after {
      content: "\2666";
    }
  </style>
</head>

<body>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</body>
<script>
</script>

</html>