forked from MfgLabs/mfglabs-iconset
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (115 loc) · 4 KB
/
index.html
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MFG Labs icon sets</title>
<meta name="description" content="An icon webfont you can easely embed anywhere on your website and web application">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/mfglabs_iconset.css">
</head>
<body>
<header>
<a href="http://mfglabs.com"><i class="icon-mfg_icon icon2x"></i></a>
</header>
<section id="listpattern" class="listpattern">
<p class="info">Heres is a little sample of what you can do with the icon font</p>
<h1>Exemple :</h1>
<ul class="list img-list">
<li>
<div class="li-icon">
<i class="icon-cloud icon2x"></i>
</div>
<div class="li-text">
<p class="li-sub">icon-cloud</p>
</div>
</li>
<li>
<div class="li-icon">
<i class="icon-at icon2x"></i>
</div>
<div class="li-text">
<p class="li-sub">icon-at</p>
</div>
</li>
<li>
<div class="li-icon">
<i class="icon-plus icon2x"></i>
</div>
<div class="li-text">
<p class="li-sub">icon-plus</p>
</div>
</li>
<li>
<div class="li-icon">
<i class="icon-arrow_up icon2x"></i>
</div>
<div class="li-text">
<p class="li-sub">icon-arrow_up</p>
</div>
</li>
<li>
<div class="li-icon">
<i class="icon-arrow_down icon2x"></i>
</div>
<div class="li-text">
<p class="li-sub">icon-arrow_down</p>
</div>
</li>
<li>
<div class="li-icon">
<i class="icon-arrow_right icon2x"></i>
</div>
<div class="li-text">
<p class="li-sub">icon-arrow_right</p>
</div>
</li>
<li>
<div class="li-icon">
<i class="icon-arrow_left icon2x"></i>
</div>
<div class="li-text">
<p class="li-sub">icon-arrow_left</p>
</div>
</li>
<li>
<div class="li-icon">
<i class="icon-chevron_down icon2x"></i>
</div>
<div class="li-text">
<p class="li-sub">icon-chevron_down</p>
</div>
</li>
<li>
<div class="li-icon">
<i class="icon-chevron_up icon2x"></i>
</div>
<div class="li-text">
<p class="li-sub">icon-chevron_up</p>
</div>
</li>
</ul>
<h1>Size subclass :</h1>
<div class="sizeexemple">
<i class="icon-cloud" aria-hidden="true"></i>
<i class="icon-cloud icon2x" aria-hidden="true"></i>
<i class="icon-cloud icon3x" aria-hidden="true"></i>
</div>
<h1>Style subclass :</h1>
<div class="styleexemple">
<i class="icon-globe gradient icon3x" aria-hidden="true"></i>
<i class="icon-time gradient icon3x" aria-hidden="true"></i>
<i class="icon-cloud gradient icon3x" aria-hidden="true"></i>
<i class="icon-stop_watch gradient icon3x" aria-hidden="true"></i>
<i class="icon-placepin gradient icon3x" aria-hidden="true"></i>
<i class="icon-data_science gradient icon3x" aria-hidden="true"></i>
<i class="icon-heart gradient icon3x" aria-hidden="true"></i>
</div>
</section>
</body>
</html>