fileicon.css
Version:
Fileicon.css - The Customizable pure CSS file icons
129 lines (124 loc) • 4.92 kB
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="fileicon.css" />
<style>
.title {
width: 240px;
border-bottom: 1px solid rgba(12,12,12,.05);
padding: 10px 0;
margin: 10px auto;
}
.bg-gray {
background: #f6f6f6;
color: #666;
padding: 1rem;
}
.section-hero,
.section-docs,
.section-footer {
padding-bottom: 4rem;
padding-top: 4rem;
}
.section-hero h1 {
color: #555;
font-size: 3.2rem;
font-weight: 400;
}
.section-hero h2 {
color: #666;
font-size: 1.8rem;
font-weight: 400;
line-height: 3rem;
margin-bottom: 3rem;
}
.code .com {
color: #c5c5c5;
}
.code .tag {
color: #5764c6;
}
.code .atn {
color: #666;
}
.code .atv {
color: #e06870;
}
.section-footer a {
color: #666;
}
</style>
</head>
<body>
<section class="section section-hero bg-gray">
<section id="overview" class="container grid-960 text-center">
<h1>Fileicon.css</h1>
<h2>The Customizable pure CSS file icons</h2>
<div class="columns">
<div class="column">
<a href="#usage" class="btn btn-primary">How to use</a>
<a href="https://github.com/picturepan2/fileicon.css" target="_blank" class="btn btn-primary">GitHub</a>
</div>
</div>
</section>
</section>
<section class="section section-docs">
<section id="usage" class="container grid-960">
<header class="text-center"><h3>Usage</h3></header>
<section class="notes">
<p>Download the <code>fileicon.css</code> and include <code>fileicon.css</code> in your website or Web app <head>. Add an element with the <code>file-icon</code> class. </p>
</section>
<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"file-icon"</span> <span class="atn">data-type</span>=<span class="atv">"doc"</span>><<span class="tag">/div</span>>
<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"file-icon file-icon-lg"</span> <span class="atn">data-type</span>=<span class="atv">"doc"</span>><<span class="tag">/div</span>>
</code></pre>
</section>
</section>
<section class="section section-docs">
<section id="examples" class="container grid-960">
<header class="text-center"><h3>Examples</h3></header>
<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>
</section>
</section>
</section>
<footer class="section section-footer bg-gray">
<section id="copyright" class="grid-footer container grid-960">
<p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
</section>
</footer>
</body>
</html>