-
Notifications
You must be signed in to change notification settings - Fork 106
/
index.html
124 lines (117 loc) · 6.17 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="https://github.com/picturepan2/" />
<title>Fileicon.css - Pure CSS file icons</title>
<link rel="stylesheet" href="css/spectre.min.css" />
<link rel="stylesheet" href="css/demo.min.css" />
<!-- Fileicon.css CSS -->
<link rel="stylesheet" href="fileicon.css" />
</head>
<body>
<div class="section section-hero bg-gray">
<div id="overview" class="grid-hero container grid-lg text-center">
<h1>Fileicon.css</h1>
<h2>The Customizable pure CSS file icons</h2>
<p>
<a href="https://github.com/picturepan2/fileicon.css" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
<a href="https://www.paypal.me/picturepan2" target="_blank" class="btn btn-primary btn-lg">PayPal Donate</a>
</p>
</div>
</div>
<div class="section section-ad bg-gray">
<div class="hide-md">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GitHub-lg -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-2225124559530218"
data-ad-slot="9894180784"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="show-md">
<!-- GitHub-sm -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-2225124559530218"
data-ad-slot="9278881734"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="section section-icons">
<div id="overview" class="grid-hero container grid-lg">
<h1 class="text-center">Getting started</h1>
<p>Download the <a href="https://github.com/picturepan2/instagram.css" target="_blank">fileicon.css</a> and include <code>fileicon.css</code> in your website or Web app <head>.</p>
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"fileicon.css"</span>></span>
</code></pre>
<p>Add an element with the <code>file-icon</code> class.</p>
<pre class="code" data-lang="HTML"><code><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"file-icon"</span> <span class="hljs-attr">data-type</span>=<span class="hljs-string">"doc"</span>><<span class="hljs-name">/div</span>>
<<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"file-icon file-icon-lg"</span> <span class="hljs-attr">data-type</span>=<span class="hljs-string">"doc"</span>><<span class="hljs-name">/div</span>>
</code></pre>
</code></pre>
</div>
</div>
<div class="section section-ad bg-gray">
<div class="docs-ad docs-ad-sidebar text-center">
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
</div>
</div>
<div class="section section-icons">
<div class="container grid-lg text-center">
<div class="columns">
<div class="column col-12">
<div class="file-icon file-icon-xs" data-type="doc"></div>
<div class="file-icon file-icon-xs" data-type="ppt"></div>
<div class="file-icon file-icon-xs" data-type="xls"></div>
<div class="file-icon file-icon-xs" data-type="png"></div>
<div class="file-icon file-icon-xs" data-type="mp3"></div>
</div>
<div class="column col-12">
<div class="file-icon" data-type="doc"></div>
<div class="file-icon" data-type="ppt"></div>
<div class="file-icon" data-type="xls"></div>
<div class="file-icon" data-type="png"></div>
<div class="file-icon" data-type="mp3"></div>
</div>
<div class="column col-12">
<div class="file-icon file-icon-lg" data-type="doc"></div>
<div class="file-icon file-icon-lg" data-type="ppt"></div>
<div class="file-icon file-icon-lg" data-type="xls"></div>
<div class="file-icon file-icon-lg" data-type="png"></div>
<div class="file-icon file-icon-lg" data-type="mp3"></div>
</div>
<div class="column col-12">
<div class="file-icon file-icon-xl" data-type="doc"></div>
<div class="file-icon file-icon-xl" data-type="ppt"></div>
<div class="file-icon file-icon-xl" data-type="xls"></div>
<div class="file-icon file-icon-xl" data-type="png"></div>
<div class="file-icon file-icon-xl" data-type="mp3"></div>
</div>
</div>
</div>
</div>
<footer class="section section-footer bg-gray">
<div id="copyright" class="grid-footer container grid-lg text-center">
<p><a href="https://github.com/picturepan2/fileicon.css" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Spectre.css</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a></p>
<p>Code with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/fileicon.css/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
</div>
</footer>
<!-- Google Analytics tracking code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2702768-8', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>