-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (83 loc) · 2.35 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
<!doctype html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Web Fonts for Higher Quality UI Icons - Hongkiat.com
</title>
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../_nav/js/jquery.js"><\/script>')</script>
<!-- demo scripts -->
<link rel="stylesheet" href="style.css">
<!-- nav script -->
<script src="../_nav/js/nav.js" type="text/javascript"></script>
</head>
<body>
<!-- nav meta -->
<div class="demo-meta">
<h1 class="demo-title">Web Fonts for Higher Quality UI Icons</h1>
<p class="demo-desc">Serve better icons for high screen reolution with Web Font. This demo shows how we add the icons within the document and via the Pseudo-elements.</p>
</div>
<!-- demo content -->
<div id="wrapper">
<section id="icon-font-face">
<h3>Using @font-face Rule</h3>
<ul class="icon-font">
<li>h</li>
<li>i</li>
<li>j</li>
<li>A</li>
<li>I</li>
</ul>
<pre>
ul.icon-font {
font-family: WebSymbolsRegular;
font-size: 12pt;
}
</pre>
</section>
<section id="icon-font-pseudo">
<h3>Using Pseudo-elements</h3>
<ul class="icon-font pseudo">
<li>Reply</li>
<li>Reply All</li>
<li>Forward</li>
<li>Attachment</li>
<li>Image</li>
</ul>
<pre>
ul.icon-font.pseudo li:before {
font-family: WebSymbolsRegular;
margin-right: 5px;
}
ul.icon-font.pseudo li:nth-child(1):before {
content: "h";
}
ul.icon-font.pseudo li:nth-child(2):before {
content: "i";
}
ul.icon-font.pseudo li:nth-child(3):before {
content: "j";
}
ul.icon-font.pseudo li:nth-child(4):before {
content: "A";
}
ul.icon-font.pseudo li:nth-child(5):before {
content: "I";
}
</pre>
</section>
<section id="icon-font-unicode">
<h3>Embeding Private Unicode</h3>
<div class="icon-font unicode">
<span></span>
</div>
<pre>
&#xf0c6;
</pre>
</section>
</div>
<!-- Github ribbon -->
<div><a href="https://github.com/hongkiat/webfont-icons"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a></div>
</body>
</html>