@geira/iconfont 0.0.23 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +90 -90
- package/dist/data.min.js +1 -1
- package/dist/data.min.js.map +1 -1
- package/dist/fonts/GeiraIcons-Regular.eot +0 -0
- package/dist/fonts/GeiraIcons-Regular.ttf +0 -0
- package/dist/fonts/GeiraIcons-Regular.woff +0 -0
- package/dist/fonts/GeiraIcons-Regular.woff2 +0 -0
- package/dist/icons.json +84 -30
- package/dist/index.html +1 -1
- package/dist/usage.html +1 -1
- package/package.json +62 -62
- package/src/fonts/GeiraIcons-Regular.eot +0 -0
- package/src/fonts/GeiraIcons-Regular.ttf +0 -0
- package/src/fonts/GeiraIcons-Regular.woff +0 -0
- package/src/fonts/GeiraIcons-Regular.woff2 +0 -0
- package/src/index.html +43 -43
- package/src/js/data.js +84 -30
- package/src/js/data.json +1 -1
- package/src/js/flutter.txt +21 -4
- package/src/js/flutter2.txt +21 -4
- package/src/js/icons.json +84 -30
- package/src/usage.html +367 -367
- package/.idea/dictionaries/TheLeos.xml +0 -7
- package/.idea/iconfont.iml +0 -12
- package/.idea/misc.xml +0 -6
- package/.idea/modules.xml +0 -8
- package/.idea/vcs.xml +0 -6
- package/.idea/workspace.xml +0 -156
package/src/usage.html
CHANGED
|
@@ -1,367 +1,367 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Geira Icons</title>
|
|
6
|
-
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
|
|
7
|
-
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
|
|
8
|
-
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
|
|
9
|
-
<link rel="manifest" href="images/favicon/site.webmanifest">
|
|
10
|
-
<link rel="mask-icon" href="images/favicon/safari-pinned-tab.svg" color="#5bbad5">
|
|
11
|
-
<meta name="msapplication-TileColor" content="#2b5797">
|
|
12
|
-
<meta name="theme-color" content="#ffffff">
|
|
13
|
-
</head>
|
|
14
|
-
<body>
|
|
15
|
-
<div class="main">
|
|
16
|
-
<header>
|
|
17
|
-
<h1>Geira Icons <a href="https://badge.fury.io/js/%40geira%2Ficonfont"><img src="https://badge.fury.io/js/%40geira%2Ficonfont.svg" alt="npm version" height="18"></a></h1>
|
|
18
|
-
|
|
19
|
-
<ul>
|
|
20
|
-
<li><a href="index.html">Icons</a></li>
|
|
21
|
-
<li class="active"><a href="usage.html">Usage</a></li>
|
|
22
|
-
</ul>
|
|
23
|
-
|
|
24
|
-
<ul class="logos">
|
|
25
|
-
<li><a href="https://www.npmjs.com/package/@geira/iconfont" target="_blank"><i class="geira-icons">npm</i></a></li>
|
|
26
|
-
<li><a href="https://
|
|
27
|
-
</ul>
|
|
28
|
-
</header>
|
|
29
|
-
<div class="container center" style="width: 95%; max-width: 800px; align-self: center">
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<!-- npm installation -->
|
|
33
|
-
|
|
34
|
-
<h2 class="title-h2">NPM installation</h2>
|
|
35
|
-
<div class="block row" style="place-content: center">
|
|
36
|
-
<div class="icons-code">
|
|
37
|
-
<code>
|
|
38
|
-
npm install --save @geira/iconfont
|
|
39
|
-
</code>
|
|
40
|
-
</div>
|
|
41
|
-
</div>
|
|
42
|
-
|
|
43
|
-
<h4>Link to CSS</h4>
|
|
44
|
-
<p>Add the following tag inside the html <head> tag</p>
|
|
45
|
-
<div class="block row" style="place-content: center">
|
|
46
|
-
<div class="icons-code">
|
|
47
|
-
<code>
|
|
48
|
-
<link href="node_components/@geira/iconfont/dist/geira-icons.min.css" rel="stylesheet">
|
|
49
|
-
</code>
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
|
|
53
|
-
<h4>or import into SCSS</h4>
|
|
54
|
-
<p>Import the provided SCSS file in your main SCSS file, ex: styles.scss</p>
|
|
55
|
-
<div class="block row" style="place-content: center">
|
|
56
|
-
<div class="icons-code">
|
|
57
|
-
<code>
|
|
58
|
-
@import '~@geira/iconfont/dist/geira-icons.scss';
|
|
59
|
-
</code>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
<!-- /npm installation -->
|
|
64
|
-
|
|
65
|
-
<h4>Like Material Icon with Angular</h4>
|
|
66
|
-
<p>Geira Icons are similar to Material Icons. If you want to use them with or instead of Material Icons, click the link <a href="https://material.angular.io/components/icon/overview" target="_blank">https://material.angular.io/components/icon/overview</a></p>
|
|
67
|
-
|
|
68
|
-
<h2 style="margin-top: 50px">Standard installation</h2>
|
|
69
|
-
|
|
70
|
-
<h4>Link to CSS</h4>
|
|
71
|
-
<p>Add the following tag inside the html <head> tag</p>
|
|
72
|
-
<div class="block row" style="place-content: center">
|
|
73
|
-
<div class="icons-code">
|
|
74
|
-
<code>
|
|
75
|
-
<link href="./geira-icons.min.css" rel="stylesheet">
|
|
76
|
-
</code>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
|
|
80
|
-
<p>In CSS (geira-icons.min.css) be sure that the path to the icons (fonts) is correct</p>
|
|
81
|
-
<div class="block row" style="place-content: center">
|
|
82
|
-
<div class="icons-code">
|
|
83
|
-
<code>
|
|
84
|
-
src : url(./fonts/GeiraIcons-Regular.eot);<br>
|
|
85
|
-
url(./fonts/GeiraIcons-Regular.woff2) format('woff2'),<br>
|
|
86
|
-
url(./fonts/GeiraIcons-Regular.woff) format('woff'),<br>
|
|
87
|
-
url(./fonts/GeiraIcons-Regular.ttf) format('truetype');
|
|
88
|
-
</code>
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
|
|
92
|
-
<h2 style="margin-top: 50px">Usage</h2>
|
|
93
|
-
|
|
94
|
-
<h4>Via html</h4>
|
|
95
|
-
<div class="block row">
|
|
96
|
-
<div class="icons-preview">
|
|
97
|
-
<i class="geira-icons">home</i>
|
|
98
|
-
</div>
|
|
99
|
-
<div class="icons-code">
|
|
100
|
-
<code><i
|
|
101
|
-
class="geira-icons">home</i>
|
|
102
|
-
</code>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
|
|
106
|
-
<p style="margin-top: 30px">Ex. "home" icon unicode is "\E0BA"</p>
|
|
107
|
-
<p style="margin-bottom: 10px">Change "<strong>\</strong>E0BA" to
|
|
108
|
-
"<strong>&#x</strong>E0BA<strong>;</strong>"</p>
|
|
109
|
-
<div class="block row">
|
|
110
|
-
<div class="icons-preview">
|
|
111
|
-
<i class="geira-icons"></i>
|
|
112
|
-
</div>
|
|
113
|
-
<div class="icons-code">
|
|
114
|
-
<code><i
|
|
115
|
-
class="geira-icons">&#xE0BA;</i>
|
|
116
|
-
</code>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
|
|
120
|
-
<h4>Via CSS</h4>
|
|
121
|
-
|
|
122
|
-
<div class="block row" style="place-content: center">
|
|
123
|
-
<div class="icons-code">
|
|
124
|
-
<code style="padding: 20px; text-align: center">
|
|
125
|
-
.some-class::before {
|
|
126
|
-
content: "\E0BA";
|
|
127
|
-
}
|
|
128
|
-
</code>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
|
|
132
|
-
<div class="block row">
|
|
133
|
-
<div class="icons-preview">
|
|
134
|
-
<i class="geira-icons some-class"></i>
|
|
135
|
-
</div>
|
|
136
|
-
<div class="icons-code">
|
|
137
|
-
<code><i
|
|
138
|
-
class="geira-icons some-class"></i>
|
|
139
|
-
</code>
|
|
140
|
-
</div>
|
|
141
|
-
</div>
|
|
142
|
-
|
|
143
|
-
<h3 style="margin-top: 50px">Styling</h3>
|
|
144
|
-
<h5>Size</h5>
|
|
145
|
-
|
|
146
|
-
<div class="block row">
|
|
147
|
-
<div class="icons-preview">
|
|
148
|
-
<i class="geira-icons gi-18">home</i>
|
|
149
|
-
</div>
|
|
150
|
-
<div class="icons-code">
|
|
151
|
-
<code><i
|
|
152
|
-
class="geira-icons gi-18">home</i>
|
|
153
|
-
</code>
|
|
154
|
-
</div>
|
|
155
|
-
</div>
|
|
156
|
-
|
|
157
|
-
<div class="block row">
|
|
158
|
-
<div class="icons-preview">
|
|
159
|
-
<i class="geira-icons gi-24">home</i>
|
|
160
|
-
</div>
|
|
161
|
-
<div class="icons-code">
|
|
162
|
-
<code><i
|
|
163
|
-
class="geira-icons gi-24">home</i>
|
|
164
|
-
</code>
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
|
|
168
|
-
<div class="block row">
|
|
169
|
-
<div class="icons-preview">
|
|
170
|
-
<i class="geira-icons gi-36">home</i>
|
|
171
|
-
</div>
|
|
172
|
-
<div class="icons-code">
|
|
173
|
-
<code><i
|
|
174
|
-
class="geira-icons gi-36">home</i>
|
|
175
|
-
</code>
|
|
176
|
-
</div>
|
|
177
|
-
</div>
|
|
178
|
-
|
|
179
|
-
<div class="block row">
|
|
180
|
-
<div class="icons-preview">
|
|
181
|
-
<i class="geira-icons gi-48">home</i>
|
|
182
|
-
</div>
|
|
183
|
-
<div class="icons-code">
|
|
184
|
-
<code><i
|
|
185
|
-
class="geira-icons gi-48">home</i>
|
|
186
|
-
</code>
|
|
187
|
-
</div>
|
|
188
|
-
</div>
|
|
189
|
-
|
|
190
|
-
<!-- COLOR -->
|
|
191
|
-
<h5>Color</h5>
|
|
192
|
-
|
|
193
|
-
<div class="block row">
|
|
194
|
-
<div class="icons-preview" style="background-color: #263238">
|
|
195
|
-
<i class="geira-icons gi-light">home</i>
|
|
196
|
-
</div>
|
|
197
|
-
<div class="icons-code">
|
|
198
|
-
<code><i
|
|
199
|
-
class="geira-icons gi-light">home</i>
|
|
200
|
-
</code>
|
|
201
|
-
</div>
|
|
202
|
-
</div>
|
|
203
|
-
|
|
204
|
-
<div class="block row">
|
|
205
|
-
<div class="icons-preview" style="background-color: #263238">
|
|
206
|
-
<i class="geira-icons gi-light gi-inactive">home</i>
|
|
207
|
-
</div>
|
|
208
|
-
<div class="icons-code">
|
|
209
|
-
<code><i
|
|
210
|
-
class="geira-icons gi-light gi-inactive">home</i>
|
|
211
|
-
</code>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
|
|
215
|
-
<div class="block row">
|
|
216
|
-
<div class="icons-preview">
|
|
217
|
-
<i class="geira-icons gi-dark">home</i>
|
|
218
|
-
</div>
|
|
219
|
-
<div class="icons-code">
|
|
220
|
-
<code><i
|
|
221
|
-
class="geira-icons gi-light">home</i>
|
|
222
|
-
</code>
|
|
223
|
-
</div>
|
|
224
|
-
</div>
|
|
225
|
-
|
|
226
|
-
<div class="block row">
|
|
227
|
-
<div class="icons-preview">
|
|
228
|
-
<i class="geira-icons gi-dark gi-inactive">home</i>
|
|
229
|
-
</div>
|
|
230
|
-
<div class="icons-code">
|
|
231
|
-
<code><i
|
|
232
|
-
class="geira-icons gi-light gi-inactive">home</i>
|
|
233
|
-
</code>
|
|
234
|
-
</div>
|
|
235
|
-
</div>
|
|
236
|
-
|
|
237
|
-
<!-- /COLOR -->
|
|
238
|
-
|
|
239
|
-
<!-- ROTATE -->
|
|
240
|
-
|
|
241
|
-
<h5>Rotate</h5>
|
|
242
|
-
|
|
243
|
-
<div class="block row">
|
|
244
|
-
<div class="icons-preview">
|
|
245
|
-
<i class="geira-icons gi-rotate-45">home</i>
|
|
246
|
-
</div>
|
|
247
|
-
<div class="icons-code">
|
|
248
|
-
<code><i
|
|
249
|
-
class="geira-icons gi-rotate-45">home</i>
|
|
250
|
-
</code>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
|
|
254
|
-
<div class="block row">
|
|
255
|
-
<div class="icons-preview">
|
|
256
|
-
<i class="geira-icons gi-rotate-90">home</i>
|
|
257
|
-
</div>
|
|
258
|
-
<div class="icons-code">
|
|
259
|
-
<code><i
|
|
260
|
-
class="geira-icons gi-rotate-90">home</i>
|
|
261
|
-
</code>
|
|
262
|
-
</div>
|
|
263
|
-
</div>
|
|
264
|
-
|
|
265
|
-
<div class="block row">
|
|
266
|
-
<div class="icons-preview">
|
|
267
|
-
<i class="geira-icons gi-rotate-135">home</i>
|
|
268
|
-
</div>
|
|
269
|
-
<div class="icons-code">
|
|
270
|
-
<code><i
|
|
271
|
-
class="geira-icons gi-rotate-135">home</i>
|
|
272
|
-
</code>
|
|
273
|
-
</div>
|
|
274
|
-
</div>
|
|
275
|
-
|
|
276
|
-
<div class="block row">
|
|
277
|
-
<div class="icons-preview">
|
|
278
|
-
<i class="geira-icons gi-rotate-180">home</i>
|
|
279
|
-
</div>
|
|
280
|
-
<div class="icons-code">
|
|
281
|
-
<code><i
|
|
282
|
-
class="geira-icons gi-rotate-180">home</i>
|
|
283
|
-
</code>
|
|
284
|
-
</div>
|
|
285
|
-
</div>
|
|
286
|
-
|
|
287
|
-
<div class="block row">
|
|
288
|
-
<div class="icons-preview">
|
|
289
|
-
<i class="geira-icons gi-rotate-225">home</i>
|
|
290
|
-
</div>
|
|
291
|
-
<div class="icons-code">
|
|
292
|
-
<code><i
|
|
293
|
-
class="geira-icons gi-rotate-225">home</i>
|
|
294
|
-
</code>
|
|
295
|
-
</div>
|
|
296
|
-
</div>
|
|
297
|
-
|
|
298
|
-
<div class="block row">
|
|
299
|
-
<div class="icons-preview">
|
|
300
|
-
<i class="geira-icons gi-rotate-270">home</i>
|
|
301
|
-
</div>
|
|
302
|
-
<div class="icons-code">
|
|
303
|
-
<code><i
|
|
304
|
-
class="geira-icons gi-rotate-270">home</i>
|
|
305
|
-
</code>
|
|
306
|
-
</div>
|
|
307
|
-
</div>
|
|
308
|
-
|
|
309
|
-
<div class="block row">
|
|
310
|
-
<div class="icons-preview">
|
|
311
|
-
<i class="geira-icons gi-rotate-315">home</i>
|
|
312
|
-
</div>
|
|
313
|
-
<div class="icons-code">
|
|
314
|
-
<code><i
|
|
315
|
-
class="geira-icons gi-rotate-315">home</i>
|
|
316
|
-
</code>
|
|
317
|
-
</div>
|
|
318
|
-
</div>
|
|
319
|
-
|
|
320
|
-
<!-- /ROTATE -->
|
|
321
|
-
|
|
322
|
-
<h5>Flip</h5>
|
|
323
|
-
|
|
324
|
-
<div class="block row">
|
|
325
|
-
<div class="icons-preview">
|
|
326
|
-
<i class="geira-icons gi-flip-v">home</i>
|
|
327
|
-
</div>
|
|
328
|
-
<div class="icons-code">
|
|
329
|
-
<code><i
|
|
330
|
-
class="geira-icons gi-flip-v">home</i>
|
|
331
|
-
</code>
|
|
332
|
-
</div>
|
|
333
|
-
</div>
|
|
334
|
-
|
|
335
|
-
<div class="block row">
|
|
336
|
-
<div class="icons-preview">
|
|
337
|
-
<i class="geira-icons gi-flip-h">home</i>
|
|
338
|
-
</div>
|
|
339
|
-
<div class="icons-code">
|
|
340
|
-
<code><i
|
|
341
|
-
class="geira-icons gi-flip-h">home</i>
|
|
342
|
-
</code>
|
|
343
|
-
</div>
|
|
344
|
-
</div>
|
|
345
|
-
|
|
346
|
-
<h5>Spin</h5>
|
|
347
|
-
|
|
348
|
-
<div class="block row">
|
|
349
|
-
<div class="icons-preview">
|
|
350
|
-
<i class="geira-icons gi-spin">home</i>
|
|
351
|
-
</div>
|
|
352
|
-
<div class="icons-code">
|
|
353
|
-
<code><i
|
|
354
|
-
class="geira-icons gi-spin">home</i>
|
|
355
|
-
</code>
|
|
356
|
-
</div>
|
|
357
|
-
</div>
|
|
358
|
-
</div>
|
|
359
|
-
|
|
360
|
-
<footer>
|
|
361
|
-
<p>©
|
|
362
|
-
</footer>
|
|
363
|
-
</div>
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
</body>
|
|
367
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Geira Icons</title>
|
|
6
|
+
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
|
|
7
|
+
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
|
|
8
|
+
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
|
|
9
|
+
<link rel="manifest" href="images/favicon/site.webmanifest">
|
|
10
|
+
<link rel="mask-icon" href="images/favicon/safari-pinned-tab.svg" color="#5bbad5">
|
|
11
|
+
<meta name="msapplication-TileColor" content="#2b5797">
|
|
12
|
+
<meta name="theme-color" content="#ffffff">
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<div class="main">
|
|
16
|
+
<header>
|
|
17
|
+
<h1>Geira Icons <a href="https://badge.fury.io/js/%40geira%2Ficonfont"><img src="https://badge.fury.io/js/%40geira%2Ficonfont.svg" alt="npm version" height="18"></a></h1>
|
|
18
|
+
|
|
19
|
+
<ul>
|
|
20
|
+
<li><a href="index.html">Icons</a></li>
|
|
21
|
+
<li class="active"><a href="usage.html">Usage</a></li>
|
|
22
|
+
</ul>
|
|
23
|
+
|
|
24
|
+
<ul class="logos">
|
|
25
|
+
<li><a href="https://www.npmjs.com/package/@geira/iconfont" target="_blank"><i class="geira-icons">npm</i></a></li>
|
|
26
|
+
<li><a href="https://github.com/liontude/geira-icons-tool" target="_blank"><i class="geira-icons">github</i></a></li>
|
|
27
|
+
</ul>
|
|
28
|
+
</header>
|
|
29
|
+
<div class="container center" style="width: 95%; max-width: 800px; align-self: center">
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
<!-- npm installation -->
|
|
33
|
+
|
|
34
|
+
<h2 class="title-h2">NPM installation</h2>
|
|
35
|
+
<div class="block row" style="place-content: center">
|
|
36
|
+
<div class="icons-code">
|
|
37
|
+
<code>
|
|
38
|
+
npm install --save @geira/iconfont
|
|
39
|
+
</code>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<h4>Link to CSS</h4>
|
|
44
|
+
<p>Add the following tag inside the html <head> tag</p>
|
|
45
|
+
<div class="block row" style="place-content: center">
|
|
46
|
+
<div class="icons-code">
|
|
47
|
+
<code>
|
|
48
|
+
<link href="node_components/@geira/iconfont/dist/geira-icons.min.css" rel="stylesheet">
|
|
49
|
+
</code>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<h4>or import into SCSS</h4>
|
|
54
|
+
<p>Import the provided SCSS file in your main SCSS file, ex: styles.scss</p>
|
|
55
|
+
<div class="block row" style="place-content: center">
|
|
56
|
+
<div class="icons-code">
|
|
57
|
+
<code>
|
|
58
|
+
@import '~@geira/iconfont/dist/geira-icons.scss';
|
|
59
|
+
</code>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<!-- /npm installation -->
|
|
64
|
+
|
|
65
|
+
<h4>Like Material Icon with Angular</h4>
|
|
66
|
+
<p>Geira Icons are similar to Material Icons. If you want to use them with or instead of Material Icons, click the link <a href="https://material.angular.io/components/icon/overview" target="_blank">https://material.angular.io/components/icon/overview</a></p>
|
|
67
|
+
|
|
68
|
+
<h2 style="margin-top: 50px">Standard installation</h2>
|
|
69
|
+
|
|
70
|
+
<h4>Link to CSS</h4>
|
|
71
|
+
<p>Add the following tag inside the html <head> tag</p>
|
|
72
|
+
<div class="block row" style="place-content: center">
|
|
73
|
+
<div class="icons-code">
|
|
74
|
+
<code>
|
|
75
|
+
<link href="./geira-icons.min.css" rel="stylesheet">
|
|
76
|
+
</code>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<p>In CSS (geira-icons.min.css) be sure that the path to the icons (fonts) is correct</p>
|
|
81
|
+
<div class="block row" style="place-content: center">
|
|
82
|
+
<div class="icons-code">
|
|
83
|
+
<code>
|
|
84
|
+
src : url(./fonts/GeiraIcons-Regular.eot);<br>
|
|
85
|
+
url(./fonts/GeiraIcons-Regular.woff2) format('woff2'),<br>
|
|
86
|
+
url(./fonts/GeiraIcons-Regular.woff) format('woff'),<br>
|
|
87
|
+
url(./fonts/GeiraIcons-Regular.ttf) format('truetype');
|
|
88
|
+
</code>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<h2 style="margin-top: 50px">Usage</h2>
|
|
93
|
+
|
|
94
|
+
<h4>Via html</h4>
|
|
95
|
+
<div class="block row">
|
|
96
|
+
<div class="icons-preview">
|
|
97
|
+
<i class="geira-icons">home</i>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="icons-code">
|
|
100
|
+
<code><i
|
|
101
|
+
class="geira-icons">home</i>
|
|
102
|
+
</code>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<p style="margin-top: 30px">Ex. "home" icon unicode is "\E0BA"</p>
|
|
107
|
+
<p style="margin-bottom: 10px">Change "<strong>\</strong>E0BA" to
|
|
108
|
+
"<strong>&#x</strong>E0BA<strong>;</strong>"</p>
|
|
109
|
+
<div class="block row">
|
|
110
|
+
<div class="icons-preview">
|
|
111
|
+
<i class="geira-icons"></i>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="icons-code">
|
|
114
|
+
<code><i
|
|
115
|
+
class="geira-icons">&#xE0BA;</i>
|
|
116
|
+
</code>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<h4>Via CSS</h4>
|
|
121
|
+
|
|
122
|
+
<div class="block row" style="place-content: center">
|
|
123
|
+
<div class="icons-code">
|
|
124
|
+
<code style="padding: 20px; text-align: center">
|
|
125
|
+
.some-class::before {
|
|
126
|
+
content: "\E0BA";
|
|
127
|
+
}
|
|
128
|
+
</code>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<div class="block row">
|
|
133
|
+
<div class="icons-preview">
|
|
134
|
+
<i class="geira-icons some-class"></i>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="icons-code">
|
|
137
|
+
<code><i
|
|
138
|
+
class="geira-icons some-class"></i>
|
|
139
|
+
</code>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<h3 style="margin-top: 50px">Styling</h3>
|
|
144
|
+
<h5>Size</h5>
|
|
145
|
+
|
|
146
|
+
<div class="block row">
|
|
147
|
+
<div class="icons-preview">
|
|
148
|
+
<i class="geira-icons gi-18">home</i>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="icons-code">
|
|
151
|
+
<code><i
|
|
152
|
+
class="geira-icons gi-18">home</i>
|
|
153
|
+
</code>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<div class="block row">
|
|
158
|
+
<div class="icons-preview">
|
|
159
|
+
<i class="geira-icons gi-24">home</i>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="icons-code">
|
|
162
|
+
<code><i
|
|
163
|
+
class="geira-icons gi-24">home</i>
|
|
164
|
+
</code>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<div class="block row">
|
|
169
|
+
<div class="icons-preview">
|
|
170
|
+
<i class="geira-icons gi-36">home</i>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="icons-code">
|
|
173
|
+
<code><i
|
|
174
|
+
class="geira-icons gi-36">home</i>
|
|
175
|
+
</code>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class="block row">
|
|
180
|
+
<div class="icons-preview">
|
|
181
|
+
<i class="geira-icons gi-48">home</i>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="icons-code">
|
|
184
|
+
<code><i
|
|
185
|
+
class="geira-icons gi-48">home</i>
|
|
186
|
+
</code>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<!-- COLOR -->
|
|
191
|
+
<h5>Color</h5>
|
|
192
|
+
|
|
193
|
+
<div class="block row">
|
|
194
|
+
<div class="icons-preview" style="background-color: #263238">
|
|
195
|
+
<i class="geira-icons gi-light">home</i>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="icons-code">
|
|
198
|
+
<code><i
|
|
199
|
+
class="geira-icons gi-light">home</i>
|
|
200
|
+
</code>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<div class="block row">
|
|
205
|
+
<div class="icons-preview" style="background-color: #263238">
|
|
206
|
+
<i class="geira-icons gi-light gi-inactive">home</i>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="icons-code">
|
|
209
|
+
<code><i
|
|
210
|
+
class="geira-icons gi-light gi-inactive">home</i>
|
|
211
|
+
</code>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<div class="block row">
|
|
216
|
+
<div class="icons-preview">
|
|
217
|
+
<i class="geira-icons gi-dark">home</i>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="icons-code">
|
|
220
|
+
<code><i
|
|
221
|
+
class="geira-icons gi-light">home</i>
|
|
222
|
+
</code>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
<div class="block row">
|
|
227
|
+
<div class="icons-preview">
|
|
228
|
+
<i class="geira-icons gi-dark gi-inactive">home</i>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="icons-code">
|
|
231
|
+
<code><i
|
|
232
|
+
class="geira-icons gi-light gi-inactive">home</i>
|
|
233
|
+
</code>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
<!-- /COLOR -->
|
|
238
|
+
|
|
239
|
+
<!-- ROTATE -->
|
|
240
|
+
|
|
241
|
+
<h5>Rotate</h5>
|
|
242
|
+
|
|
243
|
+
<div class="block row">
|
|
244
|
+
<div class="icons-preview">
|
|
245
|
+
<i class="geira-icons gi-rotate-45">home</i>
|
|
246
|
+
</div>
|
|
247
|
+
<div class="icons-code">
|
|
248
|
+
<code><i
|
|
249
|
+
class="geira-icons gi-rotate-45">home</i>
|
|
250
|
+
</code>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
<div class="block row">
|
|
255
|
+
<div class="icons-preview">
|
|
256
|
+
<i class="geira-icons gi-rotate-90">home</i>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="icons-code">
|
|
259
|
+
<code><i
|
|
260
|
+
class="geira-icons gi-rotate-90">home</i>
|
|
261
|
+
</code>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
<div class="block row">
|
|
266
|
+
<div class="icons-preview">
|
|
267
|
+
<i class="geira-icons gi-rotate-135">home</i>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="icons-code">
|
|
270
|
+
<code><i
|
|
271
|
+
class="geira-icons gi-rotate-135">home</i>
|
|
272
|
+
</code>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
|
|
276
|
+
<div class="block row">
|
|
277
|
+
<div class="icons-preview">
|
|
278
|
+
<i class="geira-icons gi-rotate-180">home</i>
|
|
279
|
+
</div>
|
|
280
|
+
<div class="icons-code">
|
|
281
|
+
<code><i
|
|
282
|
+
class="geira-icons gi-rotate-180">home</i>
|
|
283
|
+
</code>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<div class="block row">
|
|
288
|
+
<div class="icons-preview">
|
|
289
|
+
<i class="geira-icons gi-rotate-225">home</i>
|
|
290
|
+
</div>
|
|
291
|
+
<div class="icons-code">
|
|
292
|
+
<code><i
|
|
293
|
+
class="geira-icons gi-rotate-225">home</i>
|
|
294
|
+
</code>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<div class="block row">
|
|
299
|
+
<div class="icons-preview">
|
|
300
|
+
<i class="geira-icons gi-rotate-270">home</i>
|
|
301
|
+
</div>
|
|
302
|
+
<div class="icons-code">
|
|
303
|
+
<code><i
|
|
304
|
+
class="geira-icons gi-rotate-270">home</i>
|
|
305
|
+
</code>
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<div class="block row">
|
|
310
|
+
<div class="icons-preview">
|
|
311
|
+
<i class="geira-icons gi-rotate-315">home</i>
|
|
312
|
+
</div>
|
|
313
|
+
<div class="icons-code">
|
|
314
|
+
<code><i
|
|
315
|
+
class="geira-icons gi-rotate-315">home</i>
|
|
316
|
+
</code>
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
|
|
320
|
+
<!-- /ROTATE -->
|
|
321
|
+
|
|
322
|
+
<h5>Flip</h5>
|
|
323
|
+
|
|
324
|
+
<div class="block row">
|
|
325
|
+
<div class="icons-preview">
|
|
326
|
+
<i class="geira-icons gi-flip-v">home</i>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="icons-code">
|
|
329
|
+
<code><i
|
|
330
|
+
class="geira-icons gi-flip-v">home</i>
|
|
331
|
+
</code>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
<div class="block row">
|
|
336
|
+
<div class="icons-preview">
|
|
337
|
+
<i class="geira-icons gi-flip-h">home</i>
|
|
338
|
+
</div>
|
|
339
|
+
<div class="icons-code">
|
|
340
|
+
<code><i
|
|
341
|
+
class="geira-icons gi-flip-h">home</i>
|
|
342
|
+
</code>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<h5>Spin</h5>
|
|
347
|
+
|
|
348
|
+
<div class="block row">
|
|
349
|
+
<div class="icons-preview">
|
|
350
|
+
<i class="geira-icons gi-spin">home</i>
|
|
351
|
+
</div>
|
|
352
|
+
<div class="icons-code">
|
|
353
|
+
<code><i
|
|
354
|
+
class="geira-icons gi-spin">home</i>
|
|
355
|
+
</code>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
|
|
360
|
+
<footer>
|
|
361
|
+
<p>©2021 <a style="color: inherit; text-decoration: none;" href="https://liontude.com" target="_blank">Liontude</a>. All Rights Reserved. Released under MIT License</p>
|
|
362
|
+
</footer>
|
|
363
|
+
</div>
|
|
364
|
+
|
|
365
|
+
|
|
366
|
+
</body>
|
|
367
|
+
</html>
|