|
@@ -54,6 +54,24 @@
|
54
|
54
|
<div class="content unicode" style="display: block;">
|
55
|
55
|
<ul class="icon_lists dib-box">
|
56
|
56
|
|
|
57
|
+ <li class="dib">
|
|
58
|
+ <span class="icon iconfont"></span>
|
|
59
|
+ <div class="name">music_fill</div>
|
|
60
|
+ <div class="code-name">&#xe795;</div>
|
|
61
|
+ </li>
|
|
62
|
+
|
|
63
|
+ <li class="dib">
|
|
64
|
+ <span class="icon iconfont"></span>
|
|
65
|
+ <div class="name">music_forbid_fill</div>
|
|
66
|
+ <div class="code-name">&#xe796;</div>
|
|
67
|
+ </li>
|
|
68
|
+
|
|
69
|
+ <li class="dib">
|
|
70
|
+ <span class="icon iconfont"></span>
|
|
71
|
+ <div class="name">info</div>
|
|
72
|
+ <div class="code-name">&#xe6e5;</div>
|
|
73
|
+ </li>
|
|
74
|
+
|
57
|
75
|
<li class="dib">
|
58
|
76
|
<span class="icon iconfont"></span>
|
59
|
77
|
<div class="name">cc-pointer-right</div>
|
|
@@ -91,10 +109,10 @@
|
91
|
109
|
>@font-face {
|
92
|
110
|
font-family: 'iconfont';
|
93
|
111
|
src:
|
94
|
|
- url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATwAAsAAAAACegAAASjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqHEIVxATYCJAMQCwoABCAFhGcHTBt9CBHVo9mQ/UzI5HpnDI1iOEcRa3lNNNG+a+Lhcwx9P0kBQDErIMeqkkm42qnN2U1pOj8j+sN36ouKS+sreTU1J5uTzSVwm5POn4A355p6oyPMUM4+efSFtLz0sjwFwA/3S76yBssHIlfdlPjBzqL1wHqRqQOOJpiPcQq1O1UvQIs+jUCtOTaIuy5eQcD3HF+UA5LIjNogzo3n9NR44FLUSg0lVMsq0VULxA+gkL4RceC7//zxn0FwgaQig7GV4xTnJFh+Jvqsh0T7TwPIv7k1Ap2eUIGMqYVp477efAmkUDjli2vLkslWgGrTmBh04Pyznv//Q+6mxNVcrOs/XiIqwRDXU9ySKB8Yx2bHkvNUKaikh8YkPJVVqlFHrALEHRj4fptMiooJV3NeXrKirJAAby7tFsJgk60QCHSxOs390H3LORbrnlkQL/N2aSFSA7Rl5RraPP9RkLDDojL76L0IwqikV1FjDO/V8jBaLUO7mnonlWE66J7VtFq1eDkKNOse80OdynHt3UD8hTCMxnHx6maJhiFfgunUTak6ApXEFEvkH6LQi9o3ZwfblvY2Zgbq5xMTv7F5PjaOkJjLqBULHZPbN2CHzOrUEuhVzAqgSTSYs4JZQfV6aFB5eSijkkCXrF20mDWoc86o90isUFmetANH1a27adpFZbJYWtW4UXsoQ7l9ur9hhsrEuuaGGmeDu4opXR6H/FleooGVYOkDioccHOOs3iBeaeIm3ift8ZRnAp6oqh3qLpRtE4mleqditeuSsvIz3y117c3J1PMdaZVLROewOVQMedz+BHEVno3pwuLIkzbqHDYr7PoHaX+MGKB9WB+ap8s+dcyd+6ruATGCHTvTXv6upOedOHXK6yX1pi0wX5TUKVzyUbwgvNFooSDp2fS+S/H0Cx9dQ0XEq+ndjAyhk2w36WXXaKGIlI/SkKB9erm+x/th6q7r+T99zynluLexx0MDpnpLPr7WU4bGVzyjFgqeocGIg5ukm5/xU7kalAtvwbn44+5Qom1kQ8TseXwyw7xk7FUqlNK58Bq55AONB54KVKPce61z3Hzxdyj/Gg83MVS58b1yXQdMwEHvZ6XpaQk9++jq9V9Ump0SHUaNJucD6ZtyqFPnnmMB282Ze6/mdTXeOs/1umYO8gDwdT2vZGWf9jB3kjSiyxny5h84zan0o/ZYfquvXHUPv+6f+jMqc34tF8Ak8AdxYPb/JokCEYvqoZQyvs39h60fQHk/RdSqxQ8Wp9XTIaRtcDahWlsMSZU+yKoNoApuAirUWYBK1dag1iTnteu0yQOSKNzAiBMEQrMeSBr9hKzZFqrg9qFCp+dQqdlfqHVC4N1cHXMkzJFRCVrQf4iGNmfJxB/2hv5dFBcFXsh7pD6Yhykbu+KG3McS+8cvIg4cU4WLtDcshaAxJTQyBJG2jqMru5HBUO2OjErQAv0H0dDmXGRJv74b+ndRDKJeRt45iw0PZoMJQF3FG1R1IaP3j1+IOD7LMVVwUY1YzDCBVj4poZFB6BBsq5EhOVQ8TC+tt7cNahlLl0iRo0SF5ivTN4qHtwr3HH2Qw0aC/eKZ5q4DAA==') format('woff2'),
|
95
|
|
- url('iconfont.woff?t=1661220235419') format('woff'),
|
96
|
|
- url('iconfont.ttf?t=1661220235419') format('truetype'),
|
97
|
|
- url('iconfont.svg?t=1661220235419#iconfont') format('svg');
|
|
112
|
+ url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
|
|
113
|
+ url('iconfont.woff?t=1662186431769') format('woff'),
|
|
114
|
+ url('iconfont.ttf?t=1662186431769') format('truetype'),
|
|
115
|
+ url('iconfont.svg?t=1662186431769#iconfont') format('svg');
|
98
|
116
|
}
|
99
|
117
|
</code></pre>
|
100
|
118
|
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
|
|
@@ -120,6 +138,33 @@
|
120
|
138
|
<div class="content font-class">
|
121
|
139
|
<ul class="icon_lists dib-box">
|
122
|
140
|
|
|
141
|
+ <li class="dib">
|
|
142
|
+ <span class="icon iconfont icon-musicfill"></span>
|
|
143
|
+ <div class="name">
|
|
144
|
+ music_fill
|
|
145
|
+ </div>
|
|
146
|
+ <div class="code-name">.icon-musicfill
|
|
147
|
+ </div>
|
|
148
|
+ </li>
|
|
149
|
+
|
|
150
|
+ <li class="dib">
|
|
151
|
+ <span class="icon iconfont icon-musicforbidfill"></span>
|
|
152
|
+ <div class="name">
|
|
153
|
+ music_forbid_fill
|
|
154
|
+ </div>
|
|
155
|
+ <div class="code-name">.icon-musicforbidfill
|
|
156
|
+ </div>
|
|
157
|
+ </li>
|
|
158
|
+
|
|
159
|
+ <li class="dib">
|
|
160
|
+ <span class="icon iconfont icon-info"></span>
|
|
161
|
+ <div class="name">
|
|
162
|
+ info
|
|
163
|
+ </div>
|
|
164
|
+ <div class="code-name">.icon-info
|
|
165
|
+ </div>
|
|
166
|
+ </li>
|
|
167
|
+
|
123
|
168
|
<li class="dib">
|
124
|
169
|
<span class="icon iconfont icon-cc-pointer-right"></span>
|
125
|
170
|
<div class="name">
|
|
@@ -174,6 +219,30 @@
|
174
|
219
|
<div class="content symbol">
|
175
|
220
|
<ul class="icon_lists dib-box">
|
176
|
221
|
|
|
222
|
+ <li class="dib">
|
|
223
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
224
|
+ <use xlink:href="#icon-musicfill"></use>
|
|
225
|
+ </svg>
|
|
226
|
+ <div class="name">music_fill</div>
|
|
227
|
+ <div class="code-name">#icon-musicfill</div>
|
|
228
|
+ </li>
|
|
229
|
+
|
|
230
|
+ <li class="dib">
|
|
231
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
232
|
+ <use xlink:href="#icon-musicforbidfill"></use>
|
|
233
|
+ </svg>
|
|
234
|
+ <div class="name">music_forbid_fill</div>
|
|
235
|
+ <div class="code-name">#icon-musicforbidfill</div>
|
|
236
|
+ </li>
|
|
237
|
+
|
|
238
|
+ <li class="dib">
|
|
239
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
240
|
+ <use xlink:href="#icon-info"></use>
|
|
241
|
+ </svg>
|
|
242
|
+ <div class="name">info</div>
|
|
243
|
+ <div class="code-name">#icon-info</div>
|
|
244
|
+ </li>
|
|
245
|
+
|
177
|
246
|
<li class="dib">
|
178
|
247
|
<svg class="icon svg-icon" aria-hidden="true">
|
179
|
248
|
<use xlink:href="#icon-cc-pointer-right"></use>
|