Browse code

Created repository.

DoubleBastionAdmin authored on 02/03/2022 00:26:46
Showing 1 changed files
phone/css/font-awesome-4.7.0/src/test/glyphicons.html
History View file @ a3a19fc
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,795 @@
1 
+---
2 
+title: Glyphicons Visual Test Cases
3 
+relative_path: ../
4 
+---
5 
+
6 
+
7 
+<!DOCTYPE html>
8 
+<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
9 
+<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
10 
+<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
11 
+<!--[if (gte IE 9)|!(IE)]><!-->
12 
+<html lang="en" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
13 
+<head>
14 
+  <!-- Basic Page Needs
15 
+ ================================================== -->
16 
+  <meta charset="utf-8" />
17 
+  <title>{% if page.title %}{{ page.title }}{% endif %}</title>
18 
+  <meta name="description" content="Font Awesome, the iconic font designed for Bootstrap">
19 
+  <meta name="author" content="Dave Gandy">
20 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
21 
+  <!--<meta name="viewport" content="initial-scale=1; maximum-scale=1">-->
22 
+
23 
+  <!--[if lt IE 9]>
24 
+<!--  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> -->
25 
+  <![endif]-->
26 
+
27 
+  <!-- CSS
28 
+ ================================================== -->
29 
+
30 
+  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
31 
+  <!-- Le fav and touch icons -->
32 
+  <link rel="shortcut icon" href="{{ page.relative_path }}assets/ico/favicon.ico">
33 
+
34 
+  <script type="text/javascript" src="//use.typekit.net/wnc7ioh.js"></script>
35 
+  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
36 
+
37 
+  <script type="text/javascript">
38 
+    var _gaq = _gaq || [];
39 
+    _gaq.push(['_setAccount', 'UA-30136587-1']);
40 
+    _gaq.push(['_trackPageview']);
41 
+
42 
+    (function() {
43 
+      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
44 
+//      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
45 
+      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
46 
+    })();
47 
+  </script>
48 
+</head>
49 
+<body data-spy="scroll" data-target=".navbar">
50 
+<div class="wrapper"> <!-- necessary for sticky footer. wrap all content except footer -->
51 
+
52 
+<section class="container">
53 
+<h1 class="page-header">Visual Test Cases</h1>
54 
+
55 
+<h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
56 
+<div class="row">
57 
+  <div class="col-md-3">
58 
+    <div class="well">
59 
+      <i class="glyphicon glyphicon-calendar"></i> Calendar
60 
+    </div>
61 
+  </div>
62 
+  <div class="col-md-3">
63 
+    <div class="well">
64 
+      <i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
65 
+    </div>
66 
+  </div>
67 
+  <div class="col-md-3">
68 
+    <i class="glyphicon glyphicon-calendar"></i> Calendar
69 
+  </div>
70 
+  <div class="col-md-3">
71 
+    <i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
72 
+  </div>
73 
+</div>
74 
+<div class="row" style="font-size: 24px; line-height: 1.5em;">
75 
+  <div class="col-md-4">
76 
+    <div class="well">
77 
+      <i class="glyphicon glyphicon-calendar"></i> Calendar
78 
+    </div>
79 
+  </div>
80 
+  <div class="col-md-4">
81 
+    <div class="well">
82 
+      <i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
83 
+    </div>
84 
+  </div>
85 
+  <div class="col-md-4">
86 
+    <i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
87 
+  </div>
88 
+</div>
89 
+<div class="row">
90 
+  <div class="col-md-3">
91 
+    <div class="well">
92 
+      <i class="glyphicon glyphicon-minus-sign"></i> Circle
93 
+    </div>
94 
+  </div>
95 
+  <div class="col-md-3">
96 
+    <div class="well">
97 
+      <i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
98 
+    </div>
99 
+  </div>
100 
+  <div class="col-md-3">
101 
+    <i class="glyphicon glyphicon-minus-sign"></i> Circle
102 
+  </div>
103 
+  <div class="col-md-3">
104 
+    <i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
105 
+  </div>
106 
+</div>
107 
+<div class="row" style="font-size: 24px; line-height: 1.5em;">
108 
+  <div class="col-md-4">
109 
+    <div class="well">
110 
+      <i class="glyphicon glyphicon-minus-sign"></i> Circle
111 
+    </div>
112 
+  </div>
113 
+  <div class="col-md-4">
114 
+    <div class="well">
115 
+      <i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
116 
+    </div>
117 
+  </div>
118 
+  <div class="col-md-4">
119 
+    <i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
120 
+  </div>
121 
+</div>
122 
+
123 
+
124 
+<h3>Links with Icons <small>icon should activate link & underline</small></h3>
125 
+<div class="row lead">
126 
+  <div class="col-md-3">
127 
+    <a href="#"><i class="glyphicon glyphicon-calendar"></i> Link Here</a>
128 
+  </div>
129 
+  <div class="col-md-3">
130 
+    <a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Link Here</a>
131 
+  </div>
132 
+  <div class="col-md-3">
133 
+    <a href="#">Link Here <i class="glyphicon glyphicon-chevron-right"></i></a>
134 
+  </div>
135 
+  <div class="col-md-3">
136 
+    <a href="#">Link Here <i class="glyphicon glyphicon-chevron-right glyphicon-lg"></i></a>
137 
+  </div>
138 
+</div>
139 
+<div class="row">
140 
+  <div class="col-md-3">
141 
+    <a href="#"><i class="glyphicon glyphicon-calendar"></i> Link Here</a>
142 
+  </div>
143 
+  <div class="col-md-3">
144 
+    <a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Link Here</a>
145 
+  </div>
146 
+  <div class="col-md-3">
147 
+    <a href="#">Link Here <i class="glyphicon glyphicon-chevron-right"></i></a>
148 
+  </div>
149 
+  <div class="col-md-3">
150 
+    <a href="#">Link Here <i class="glyphicon glyphicon-chevron-right glyphicon-lg"></i></a>
151 
+  </div>
152 
+</div>
153 
+
154 
+
155 
+<h3>Navbar  <small>should stay same height </small></h3>
156 
+<nav class="navbar navbar-inverse" role="navigation">
157 
+  <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-flag"></i> Font Awesome</a>
158 
+  <ul class="nav navbar-nav">
159 
+    <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
160 
+    <li class="dropdown" style="border: solid 1px white;">
161 
+      <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
162 
+        Nav Item 2
163 
+        <b class="caret"></b>
164 
+      </a>
165 
+      <ul class="dropdown-menu" role="menu">
166 
+        <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
167 
+        <li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
168 
+      </ul>
169 
+    </li>
170 
+    <li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Nav Item 3</a></li>
171 
+    <li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-envelope"></i> Nav Item 4</a></li>
172 
+    <li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Nav Item 5</a></li>
173 
+    <li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-minus-sign"></i> Nav Item 6</a></li>
174 
+  </ul>
175 
+</nav>
176 
+
177 
+
178 
+<h3>Plain buttons next to buttons w/icons <small>should be same height, icons not clipped</small></h3>
179 
+<h4>Buttons</h4>
180 
+<div class="row">
181 
+  <div class="col-md-6">
182 
+    <div style="border: solid 1px #d3d3d3; text-align: center;">
183 
+      <div>
184 
+        <button class="btn btn-default btn-xs">Button</button>
185 
+        <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i> Button</button>
186 
+        <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i></button>
187 
+      </div>
188 
+      <div>
189 
+        <button class="btn btn-default btn-sm">Button</button>
190 
+        <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i> Button</button>
191 
+        <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
192 
+      </div>
193 
+      <div>
194 
+        <button class="btn btn-default">Button</button>
195 
+        <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i> Button</button>
196 
+        <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
197 
+      </div>
198 
+      <div>
199 
+        <button class="btn btn-default btn-lg">Button</button>
200 
+        <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i> Button</button>
201 
+        <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i></button>
202 
+      </div>
203 
+    </div>
204 
+  </div>
205 
+  <div class="col-md-6">
206 
+    <div style="border: solid 1px #d3d3d3; text-align: center;">
207 
+      <div>
208 
+        <button class="btn btn-default btn-xs">Button</button>
209 
+        <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
210 
+        <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
211 
+      </div>
212 
+      <div>
213 
+        <button class="btn btn-default btn-sm">Button</button>
214 
+        <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
215 
+        <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
216 
+      </div>
217 
+      <div>
218 
+        <button class="btn btn-default">Button</button>
219 
+        <button class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
220 
+        <button class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
221 
+      </div>
222 
+      <div>
223 
+        <button class="btn btn-default btn-lg">Button</button>
224 
+        <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
225 
+        <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
226 
+      </div>
227 
+    </div>
228 
+  </div>
229 
+</div>
230 
+<div class="row">
231 
+  <div class="col-md-6">
232 
+    <div style="border: solid 1px #d3d3d3; text-align: center;">
233 
+      <div>
234 
+        <button class="btn btn-default btn-xs">Button</button>
235 
+        <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
236 
+        <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i></button>
237 
+      </div>
238 
+      <div>
239 
+        <button class="btn btn-default btn-sm">Button</button>
240 
+        <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
241 
+        <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i></button>
242 
+      </div>
243 
+      <div>
244 
+        <button class="btn btn-default">Button</button>
245 
+        <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
246 
+        <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i></button>
247 
+      </div>
248 
+      <div>
249 
+        <button class="btn btn-default btn-lg">Button</button>
250 
+        <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
251 
+        <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i></button>
252 
+      </div>
253 
+    </div>
254 
+  </div>
255 
+  <div class="col-md-6">
256 
+    <div style="border: solid 1px #d3d3d3; text-align: center;">
257 
+      <div>
258 
+        <button class="btn btn-default btn-xs">Button</button>
259 
+        <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
260 
+        <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
261 
+      </div>
262 
+      <div>
263 
+        <button class="btn btn-default btn-sm">Button</button>
264 
+        <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
265 
+        <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
266 
+      </div>
267 
+      <div>
268 
+        <button class="btn btn-default">Button</button>
269 
+        <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
270 
+        <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
271 
+      </div>
272 
+      <div>
273 
+        <button class="btn btn-default btn-lg">Button</button>
274 
+        <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
275 
+        <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
276 
+      </div>
277 
+    </div>
278 
+  </div>
279 
+</div>
280 
+
281 
+
282 
+<h4>Anchors</h4>
283 
+<div class="row">
284 
+  <div class="col-md-6">
285 
+    <div style="border: solid 1px #d3d3d3; text-align: center;">
286 
+      <div>
287 
+        <a class="btn btn-default btn-xs">Button</a>
288 
+        <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i> Button</a>
289 
+        <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i></a>
290 
+      </div>
291 
+      <div>
292 
+        <a class="btn btn-default btn-sm">Button</a>
293 
+        <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i> Button</a>
294 
+        <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></a>
295 
+      </div>
296 
+      <div>
297 
+        <a class="btn btn-default">Button</a>
298 
+        <a class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i> Button</a>
299 
+        <a class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></a>
300 
+      </div>
301 
+      <div>
302 
+        <a class="btn btn-default btn-lg">Button</a>
303 
+        <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i> Button</a>
304 
+        <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i></a>
305 
+      </div>
306 
+    </div>
307 
+  </div>
308 
+  <div class="col-md-6">
309 
+    <div style="border: solid 1px #d3d3d3; text-align: center;">
310 
+      <div>
311 
+        <a class="btn btn-default btn-xs">Button</a>
312 
+        <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
313 
+        <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
314 
+      </div>
315 
+      <div>
316 
+        <a class="btn btn-default btn-sm">Button</a>
317 
+        <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
318 
+        <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
319 
+      </div>
320 
+      <div>
321 
+        <a class="btn btn-default">Button</a>
322 
+        <a class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
323 
+        <a class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
324 
+      </div>
325 
+      <div>
326 
+        <a class="btn btn-default btn-lg">Button</a>
327 
+        <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
328 
+        <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
329 
+      </div>
330 
+    </div>
331 
+  </div>
332 
+</div>
333 
+<div class="row">
334 
+  <div class="col-md-6">
335 
+    <div style="border: solid 1px #d3d3d3; text-align: center;">
336 
+      <div>
337 
+        <a class="btn btn-default btn-xs">Button</a>
338 
+        <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
339 
+        <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i></a>
340 
+      </div>
341 
+      <div>
342 
+        <a class="btn btn-default btn-sm">Button</a>
343 
+        <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
344 
+        <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i></a>
345 
+      </div>
346 
+      <div>
347 
+        <a class="btn btn-default">Button</a>
348 
+        <a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
349 
+        <a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i></a>
350 
+      </div>
351 
+      <div>
352 
+        <a class="btn btn-default btn-lg">Button</a>
353 
+        <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
354 
+        <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i></a>
355 
+      </div>
356 
+    </div>
357 
+  </div>
358 
+  <div class="col-md-6">
359 
+    <div style="border: solid 1px #d3d3d3; text-align: center;">
360 
+      <div>
361 
+        <a class="btn btn-default btn-xs">Button</a>
362 
+        <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
363 
+        <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
364 
+      </div>
365 
+      <div>
366 
+        <a class="btn btn-default btn-sm">Button</a>
367 
+        <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
368 
+        <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
369 
+      </div>
370 
+      <div>
371 
+        <a class="btn btn-default">Button</a>
372 
+        <a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
373 
+        <a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
374 
+      </div>
375 
+      <div>
376 
+        <a class="btn btn-default btn-lg">Button</a>
377 
+        <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
378 
+        <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
379 
+      </div>
380 
+    </div>
381 
+  </div>
382 
+</div>
383 
+
384 
+<h3>Button groups <small>should be same height</small></h3>
385 
+<div class="row">
386 
+  <div class="col-md-4">
387 
+    <div style="border: solid 1px #d3d3d3;">
388 
+      <div class="btn-group">
389 
+        <button class="btn btn-default btn-lg">
390 
+          <i class="icon-adjust"></i>
391 
+        </button>
392 
+        <button class="btn btn-default btn-lg">
393 
+          Text
394 
+        </button>
395 
+      </div>
396 
+    </div>
397 
+  </div>
398 
+  <div class="col-md-4">
399 
+    <div style="border: solid 1px #d3d3d3;">
400 
+      <div class="btn-group">
401 
+        <button class="btn btn-default">
402 
+          <i class="icon-adjust"></i>
403 
+        </button>
404 
+        <button class="btn btn-default">
405 
+          Text
406 
+        </button>
407 
+      </div>
408 
+    </div>
409 
+  </div>
410 
+  <div class="col-md-4">
411 
+    <div style="border: solid 1px #d3d3d3;">
412 
+      <div class="btn-group">
413 
+        <button class="btn btn-default btn-sm">
414 
+          <i class="icon-adjust"></i>
415 
+        </button>
416 
+        <button class="btn btn-default btn-sm">
417 
+          Text
418 
+        </button>
419 
+      </div>
420 
+    </div>
421 
+  </div>
422 
+</div>
423 
+
424 
+<h3>Buttons with pulled 2x, 3x, 4x <small>should be same height, have correct line height</small></h3>
425 
+<div class="row">
426 
+  <div class="col-md-4">
427 
+    <div style="border: solid 1px #d3d3d3;">
428 
+      <a class="btn btn-default btn-lg" href="#">
429 
+        <i class="icon-github icon-2x pull-left"></i>
430 
+        Longer<br>Button</a>
431 
+      <a class="btn btn-default btn-lg" href="#">
432 
+        Longer<br>Button</a>
433 
+    </div>
434 
+  </div>
435 
+  <div class="col-md-4">
436 
+    <div style="border: solid 1px #d3d3d3;">
437 
+      <a class="btn btn-default" href="#">
438 
+        <i class="icon-github icon-2x pull-left"></i>
439 
+        Longer<br>Button</a>
440 
+      <a class="btn btn-default" href="#">
441 
+        Longer<br>Button</a>
442 
+    </div>
443 
+  </div>
444 
+  <div class="col-md-4">
445 
+    <div style="border: solid 1px #d3d3d3;">
446 
+      <a class="btn btn-default btn-sm" href="#">
447 
+        <i class="icon-github icon-2x pull-left"></i>
448 
+        Longer<br>Button</a>
449 
+      <a class="btn btn-default btn-sm" href="#">
450 
+        Longer<br>Button</a>
451 
+    </div>
452 
+  </div>
453 
+</div>
454 
+
455 
+
456 
+<h3>Nav pills & nav tabs <small>should be same height and properly vertically aligned</small></h3>
457 
+<div class="row">
458 
+  <div class="col-md-9">
459 
+    <ul class="nav nav-pills" style="border: solid 1px #d3d3d3;">
460 
+      <li class="active"><a href="#">Nav Item 1</a></li>
461 
+      <li class="dropdown active">
462 
+        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
463 
+          Nav Item 2
464 
+          <col-md- class="caret"></col-md->
465 
+        </a>
466 
+        <ul class="dropdown-menu" role="menu">
467 
+          <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
468 
+          <li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
469 
+        </ul>
470 
+      </li>
471 
+      <li class="dropdown active">
472 
+        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
473 
+          Nav Item 3
474 
+          <i class="icon-caret-down"></i>
475 
+        </a>
476 
+        <ul class="dropdown-menu" role="menu">
477 
+          <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
478 
+          <li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
479 
+        </ul>
480 
+      </li>
481 
+      <li class="active"><a href="#examples"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Nav Item 4</a></li>
482 
+      <li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
483 
+      <li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Nav Item 6</a></li>
484 
+      <li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign"></i> Nav Item 7</a></li>
485 
+    </ul>
486 
+    <ul class="nav nav-tabs">
487 
+      <li class="active"><a href="#">Nav Item 1</a></li>
488 
+      <li class="dropdown active">
489 
+        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
490 
+          Nav Item 2
491 
+          <col-md- class="caret"></col-md->
492 
+        </a>
493 
+        <ul class="dropdown-menu" role="menu">
494 
+          <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
495 
+          <li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
496 
+        </ul>
497 
+      </li>
498 
+      <li class="dropdown active">
499 
+        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
500 
+          Nav Item 3
501 
+          <i class="icon-caret-down"></i>
502 
+        </a>
503 
+        <ul class="dropdown-menu" role="menu">
504 
+          <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
505 
+          <li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
506 
+        </ul>
507 
+      </li>
508 
+      <li class="active"><a href="#examples"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Nav Item 4</a></li>
509 
+      <li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
510 
+      <li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Nav Item 6</a></li>
511 
+      <li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign"></i> Nav Item 7</a></li>
512 
+    </ul>
513 
+  </div>
514 
+  <div class="col-md-3">
515 
+    <ul class="nav nav-list">
516 
+      <li>
517 
+        <a href="#c1">
518 
+          <i class="icon-chevron-right icon-fixed-width pull-right"></i> Overview
519 
+        </a>
520 
+      </li>
521 
+      <li>
522 
+        <a href="#c1">
523 
+          Overview
524 
+          <i class="icon-chevron-right icon-fixed-width pull-right"></i>
525 
+        </a>
526 
+      </li>
527 
+    </ul>
528 
+  </div>
529 
+</div>
530 
+
531 
+
532 
+
533 
+<h3>2x, 3x, 4x icons in text <small>should have margins next to and below text</small></h3>
534 
+<div class="row">
535 
+  <div class="col-md-6">
536 
+    <p class="lead">
537 
+      <i class="icon-stethoscope icon-3x pull-left icon-border"></i>
538 
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
539 
+    </p>
540 
+  </div>
541 
+  <div class="col-md-6">
542 
+    <p class="lead">
543 
+      <i class="icon-ambulance icon-4x pull-right icon-border"></i>
544 
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
545 
+    </p>
546 
+  </div>
547 
+</div>
548 
+<div class="row">
549 
+  <div class="col-md-4">
550 
+    <i class="glyphicon glyphicon-calendar icon-2x pull-left icon-border"></i>
551 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
552 
+  </div>
553 
+  <div class="col-md-4">
554 
+    <i class="icon-stethoscope icon-3x pull-right icon-border"></i>
555 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
556 
+  </div>
557 
+  <div class="col-md-4">
558 
+    <i class="icon-ambulance icon-4x pull-left"></i>
559 
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
560 
+  </div>
561 
+</div>
562 
+
563 
+
564 
+<h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
565 
+<div class="row">
566 
+  <div class="col-md-6">
567 
+    <div style="border: solid 1px #d3d3d3;">
568 
+      <ul class="icons-ul">
569 
+        <li><i class="icon-li glyphicon glyphicon-chevron-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
570 
+        <li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
571 
+        <li><i class="icon-li glyphicon glyphicon-calendar"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
572 
+          <i class="glyphicon glyphicon-calendar"></i>
573 
+          <col-md- class="label">foo</col-md->
574 
+          <a class="btn btn-default">foo</a>
575 
+        </li>
576 
+      </ul>
577 
+    </div>
578 
+  </div>
579 
+  <div class="col-md-6">
580 
+    <div style="border: solid 1px #d3d3d3;">
581 
+      <ul class="icons-ul">
582 
+        <li><i class="icon-li glyphicon glyphicon-chevron-right glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
583 
+        <li><i class="icon-li icon-arrow-right glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
584 
+        <li><i class="icon-li glyphicon glyphicon-calendar glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
585 
+      </ul>
586 
+    </div>
587 
+  </div>
588 
+</div>
589 
+<div class="row">
590 
+  <div class="col-md-6">
591 
+    <div style="border: solid 1px #d3d3d3;">
592 
+      <ul class="icons-ul lead">
593 
+        <li><i class="icon-li glyphicon glyphicon-chevron-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
594 
+        <li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
595 
+        <li><i class="icon-li glyphicon glyphicon-calendar"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
596 
+      </ul>
597 
+    </div>
598 
+  </div>
599 
+  <div class="col-md-6">
600 
+    <div style="border: solid 1px #d3d3d3;">
601 
+      <ul class="icons-ul lead">
602 
+        <li><i class="icon-li glyphicon glyphicon-chevron-right glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
603 
+        <li><i class="icon-li icon-arrow-right glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
604 
+        <li><i class="icon-li glyphicon glyphicon-calendar glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
605 
+      </ul>
606 
+    </div>
607 
+  </div>
608 
+</div>
609 
+<div class="row">
610 
+  <div class="col-md-6">
611 
+    <div style="border: solid 1px #d3d3d3;">
612 
+      <ul class="icons-ul">
613 
+        <li><a href="#"><i class="icon-li glyphicon glyphicon-chevron-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
614 
+        <li><a href="#"><i class="icon-li icon-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
615 
+        <li><a href="#"><i class="icon-li glyphicon glyphicon-calendar"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
616 
+      </ul>
617 
+    </div>
618 
+  </div>
619 
+  <div class="col-md-6">
620 
+    <div style="border: solid 1px #d3d3d3;">
621 
+      <ul class="icons-ul">
622 
+        <li><a href="#"><i class="icon-li glyphicon glyphicon-chevron-right glyphicon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
623 
+        <li><a href="#"><i class="icon-li icon-arrow-right glyphicon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
624 
+        <li><a href="#"><i class="icon-li glyphicon glyphicon-calendar glyphicon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
625 
+      </ul>
626 
+    </div>
627 
+  </div>
628 
+</div>
629 
+<div class="row">
630 
+  <div class="col-md-6">
631 
+    <div style="border: solid 1px #d3d3d3;">
632 
+      <ul class="icons-ul">
633 
+        <li><i class="icon-li icon-refresh icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
634 
+        <li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
635 
+        <li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
636 
+          <i class="glyphicon glyphicon-calendar"></i>
637 
+          <col-md- class="label">foo</col-md->
638 
+          <a class="btn btn-default">foo</a>
639 
+        </li>
640 
+      </ul>
641 
+    </div>
642 
+  </div>
643 
+  <div class="col-md-6">
644 
+    <div style="border: solid 1px #d3d3d3;">
645 
+      <ul class="icons-ul">
646 
+        <li><i class="icon-li icon-refresh icon-spin glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
647 
+        <li><i class="icon-li icon-spinner icon-spin glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
648 
+        <li><i class="icon-li icon-spinner icon-spin glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
649 
+          <i class="glyphicon glyphicon-calendar"></i>
650 
+          <col-md- class="label">foo</col-md->
651 
+          <a class="btn btn-default">foo</a>
652 
+        </li>
653 
+      </ul>
654 
+    </div>
655 
+  </div>
656 
+</div>
657 
+
658 
+
659 
+<div class="row">
660 
+  <div class="col-md-6">
661 
+    <div style="border: solid 1px #d3d3d3;">
662 
+      <ul>
663 
+        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
664 
+        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
665 
+        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
666 
+      </ul>
667 
+    </div>
668 
+  </div>
669 
+  <div class="col-md-6">
670 
+    <div style="border: solid 1px #d3d3d3;">
671 
+      <ul>
672 
+        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
673 
+        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
674 
+        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
675 
+      </ul>
676 
+    </div>
677 
+  </div>
678 
+</div>
679 
+
680 
+
681 
+<h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
682 
+<div style="border: solid 1px #d3d3d3;">
683 
+  <i class="icon-refresh icon-spin"></i> Loading...
684 
+  <button class="btn btn-default btn-sm"><i class="icon-refresh icon-spin"></i> Loading...</button>
685 
+  <button class="btn btn-default btn-sm">Loading...</button>
686 
+  <i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...
687 
+  <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...</button>
688 
+  <a href="#"><i class="icon-refresh icon-spin"></i> Loading...</a>
689 
+</div>
690 
+<div style="border: solid 1px #d3d3d3;">
691 
+  <i class="icon-refresh icon-spin"></i> Loading...
692 
+  <button class="btn btn-default"><i class="icon-refresh icon-spin"></i> Loading...</button>
693 
+  <button class="btn btn-default">Loading...</button>
694 
+  <i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...
695 
+  <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...</button>
696 
+</div>
697 
+<div style="border: solid 1px #d3d3d3;">
698 
+  <i class="icon-spinner icon-spin"></i> Loading...
699 
+  <button class="btn btn-default btn-lg"><i class="icon-spinner icon-spin"></i> Loading...</button>
700 
+  <button class="btn btn-default btn-lg">Loading...</button>
701 
+  <i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...
702 
+  <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...</button>
703 
+</div>
704 
+<h4>glyphicon-lg</h4>
705 
+<div style="border: solid 1px #d3d3d3;">
706 
+  <i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...
707 
+  <button class="btn btn-default btn-sm"><i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...</button>
708 
+  <button class="btn btn-default btn-sm">Loading...</button>
709 
+  <i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...
710 
+  <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...</button>
711 
+</div>
712 
+<div style="border: solid 1px #d3d3d3;">
713 
+  <i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...
714 
+  <button class="btn btn-default"><i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...</button>
715 
+  <button class="btn btn-default">Loading...</button>
716 
+  <i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...
717 
+  <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...</button>
718 
+</div>
719 
+<div style="border: solid 1px #d3d3d3;">
720 
+  <i class="icon-spinner glyphicon-lg icon-spin"></i> Loading...
721 
+  <button class="btn btn-default btn-lg"><i class="icon-spinner glyphicon-lg icon-spin"></i> Loading...</button>
722 
+  <button class="btn btn-default btn-lg">Loading...</button>
723 
+  <i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...
724 
+  <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...</button>
725 
+</div>
726 
+<h4>Bootstrap Prepend and Append</h4>
727 
+<div class="row">
728 
+  <div class="col-md-6">
729 
+    <div class="input-prepend">
730 
+      <col-md- class="add-on"><i class="icon-spinner icon-spin"></i></col-md->
731 
+      <input class="col-md-2" id="prependedInput" type="text" placeholder="Username">
732 
+    </div>
733 
+  </div>
734 
+  <div class="col-md-6">
735 
+    <div class="input-append">
736 
+      <input class="col-md-2" id="appendedInput" type="text">
737 
+      <col-md- class="add-on"><i class="icon-spinner icon-spin"></i></col-md->
738 
+    </div>
739 
+  </div>
740 
+</div>
741 
+
742 
+<h3>Stacked icons</h3>
743 
+<div class="well">
744 
+  {% include tests/stacked.html %}
745 
+</div>
746 
+<div class="well lead">
747 
+  {% include tests/stacked.html %}
748 
+</div>
749 
+<h4>Stacked icons inside anchor</h4>
750 
+<div class="well">
751 
+  {% include tests/stacked-inside-anchor.html %}
752 
+</div>
753 
+
754 
+
755 
+<h3>Mirrored and rotated icons</h3>
756 
+<div class="row">
757 
+  <div class="col-md-6">
758 
+    <div class="well">
759 
+      {% include tests/rotated-flipped.html %}
760 
+    </div>
761 
+  </div>
762 
+  <div class="col-md-6">
763 
+    <div class="well lead">
764 
+      {% include tests/rotated-flipped.html %}
765 
+    </div>
766 
+  </div>
767 
+</div>
768 
+<h4>Mirrored and rotated icons inside anchors and buttons</h4>
769 
+<div class="row">
770 
+  <div class="col-md-6">
771 
+    <div class="well">
772 
+      {% include tests/rotated-flipped-inside-anchor.html %}
773 
+    </div>
774 
+  </div>
775 
+  <div class="col-md-6">
776 
+    <div class="well">
777 
+      {% include tests/rotated-flipped-inside-btn.html %}
778 
+    </div>
779 
+  </div>
780 
+</div>
781 
+
782 
+</section>
783 
+
784 
+  <div class="push"><!-- necessary for sticky footer --></div>
785 
+</div>
786 
+
787 
+<script src="http://platform.twitter.com/widgets.js"></script>
788 
+<script src="{{ page.relative_path }}assets/js/jquery-1.7.1.min.js"></script>
789 
+<script src="{{ page.relative_path }}assets/js/ZeroClipboard-1.1.7.min.js"></script>
790 
+<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
791 
+
792 
+</body>
793 
+</html>
794 
+
795 
+