octoleo/file-icon-vectors
1
1
Fork 0
mirror of https://github.com/namibia/file-icon-vectors.git synced 2024-12-27 09:52:38 +00:00
Code Issues Releases Activity

Changed demo theme

Browse Source
This commit is contained in:
Daniel Hendricks 2018-09-18 07:38:01 -05:00
parent 96b917abb6
commit 4253da63ca
2 changed files with 93 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo/demo.css
View File

@ -1,10 +1,17 @@
body { margin: 2em auto 0; } body { margin: 2em auto 0; }
footer { margin-top: 2.5em; margin-bottom: 1.5em; padding-top: 1em; border-top: 1px solid #ccc; } footer { margin-top: 2.5em; margin-bottom: 1.5em; padding-top: 1em; border-top: 1px solid #ccc; }
h1 { font-weight: 400; margin-bottom: 0.1rem; }
p { font-size: 1.2em; }
.fiv-cla, .fiv-viv, .fiv-sqo { font-size: 3.5em; margin: .5em 0 2px; } .fiv-cla, .fiv-viv, .fiv-sqo { font-size: 3.5em; margin: .1em 0 2px; }
.icon-desc { font-size: .85em; text-align: center; overflow: scroll; white-space: nowrap; } .icon-desc { font-size: .85em; text-align: center; overflow: scroll; white-space: nowrap; }
.intro { margin-top: 0.75em; }
.byline { margin-bottom: 0.3em; font-size: 1.2em; }
#content { width: 100%; }
#tools { text-align: center; float: right; }
#tools p { margin-top: 1em; }
#tools p > a { border-width: 2.25px; font-weight: bold; margin: 0 0.1em; min-width: 6em; }
#github { margin-top: .5em; max-width: 160px; }
.ga-beacon { margin-top: .5em; } .ga-beacon { margin-top: .5em; }
div.spacer-1 { height: 1em; } div.spacer-1 { height: 1em; }
@ -12,7 +19,7 @@ div.spacer-2 { height: 2em; }
/* Media Query Hacks */ /* Media Query Hacks */
@media (max-width: 767px) { @media (max-width: 767px) {
.hidden-xs-down { #tools, .hidden-xs-down {
display: none; display: none;
} }
} }

117
demo/index.html
View File

@ -1,39 +1,73 @@
<!doctype html> <!doctype html>
<html lang="en-US" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/WebPage"> <html lang="en" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#" itemscope itemtype="http://schema.org/WebPage">
<head> <head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta charset="utf-8" />
<title>File Icon Vectors (1.0)</title> <meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="description" content="A collection of file type icons in SVG format" /> <title>File Icon Vectors (1.0)</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="A collection of file type icons in SVG format" />
<meta name="keywords" content="file,icon,vector,css,images" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="author" content="Daniel M. Hendricks" /> <meta name="keywords" content="file,icon,vector,css,images" />
<meta property="og:locale" content="en_US" /> <meta name="author" content="Daniel M. Hendricks" />
<meta property="og:image" content="https://f001.backblazeb2.com/file/hendricks/projects/github/dmhendricks/file-icon-vectors/file-icon-vectors.png" /> <meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="Free File Icons (SVG)" /> <meta property="og:image" content="https://f001.backblazeb2.com/file/hendricks/projects/github/dmhendricks/file-icon-vectors/file-icon-vectors.png" />
<meta property="og:description" content="A collection of free file type icons in SVG format." /> <meta property="og:site_name" content="Free File Icons (SVG)" />
<link rel="shortcut icon" type="image/x-icon" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/demo/images/favicon.ico" /> <meta property="og:description" content="A collection of free file type icons in SVG format." />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link rel="shortcut icon" type="image/x-icon" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/demo/images/favicon.ico" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SocialIcons/1.0.1/soc.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous" />
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-classic.min.css" /> <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.3/cosmo/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-vivid.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SocialIcons/1.0.1/soc.min.css" />
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-square-o.min.css" /> <link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/demo/demo.css" /> <link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-vivid.min.css" />
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/demo/demo.css" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="File Icon Vectors (1.0)" />
<meta property="og:description" content="A collection of file type icons in SVG format." />
<meta property="og:url" content="https://dmhendricks.github.io/demo/file-icon-vectors/" />
<meta property="og:site_name" content="Daniel M. Hendricks" />
<meta property="article:publisher" content="https://www.facebook.com/cloudverve" />
<meta property="article:tag" content="file" />
<meta property="article:tag" content="icon" />
<meta property="article:tag" content="extension" />
<meta property="article:tag" content="svg" />
<meta property="article:tag" content="css" />
<meta property="article:published_time" content="2018-09-18T07:36:45-05:00" />
<meta property="fb:app_id" content="849932755186655" />
<meta property="og:image" content="https://cdn.danhendricks.com/wp-content/uploads/2018/09/opengraph-file-icon-vectors.jpg" />
<meta property="og:image:secure_url" content="https://cdn.danhendricks.com/wp-content/uploads/2018/09/opengraph-file-icon-vectors.jpg" />
<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="512" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="A collection of file type icons in SVG format." />
<meta name="twitter:title" content="File Icon Vectors (1.0)" />
<meta name="twitter:site" content="@danielhendricks" />
<meta name="twitter:image" content="https://cdn.danhendricks.com/wp-content/uploads/2018/09/twitter-card-file-icon-vectors.jpg" />
<meta name="twitter:creator" content="@danielhendricks" />
</head> </head>
<body> <body>
<div class="row sr-only sr-only-focusable"><a href="#content">Skip to main content</a></div>
<div class="container"> <div class="container">
<div class="row sr-only sr-only-focusable"> <div id="tools">
<a href="#content">Skip to main content</a> <div id="google_translate_element"></div>
<p><a class="btn btn-outline-secondary" href="https://github.com/dmhendricks/file-icon-vectors/">GitHub</a> <a class="btn btn-outline-secondary" href="https://www.npmjs.com/package/file-icon-vectors/">NPM</a></p>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-10 col-sm-8 col-xs-12"> <div class="col-12">
<h1>File Icon Vectors</h1> <h1>File Icon Vectors</h1>
<p class="byline">by <a href="https://www.danhendricks.com/?utm_source=github.com&utm_medium=campaign&utm_content=link&utm_campaign=demo/file-icon-vectors" class="notranslate">Daniel M. Hendricks</a></p>
<div id="badges">
<a href="https://www.npmjs.com/package/file-icon-vectors/"><img src="https://img.shields.io/npm/v/file-icon-vectors.svg?style=flat-square" /></a>
<a href="https://raw.githubusercontent.com/dmhendricks/file-icon-vectors/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-yellow.svg?style=flat-square" /></a>
</div> </div>
<div class="col-md-2 col-sm-4 hidden-xs-down text-center">
View it on:
<a href="https://github.com/dmhendricks/file-icon-vectors?utm_source=github.com&utm_medium=campaign&utm_content=link&utm_campaign=file-icon-vectors"><img src="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/demo/images/github.svg" alt="GitHub" title="View it on GitHub" id="github" /></a>
</div> </div>
</div> </div>
@ -41,7 +75,7 @@
<div class="col-12"> <div class="col-12">
<div class="spacer-1"></div> <div class="spacer-1"></div>
<p>Click on the tabs below to view the each icon set:</p> <p class="intro">Click on the tabs below to view the each icon set:</p>
<!-- Nav tabs --> <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
@ -57,7 +91,7 @@
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
<div class="tab-content"> <div class="tab-content notranslate">
<div role="tabpanel" class="tab-pane" id="classic"> <div role="tabpanel" class="tab-pane" id="classic">
<div class="row spacer-1"></div> <div class="row spacer-1"></div>
@ -373,6 +407,8 @@
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-in" title="IN"></span><p class="icon-desc">IN</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-in" title="IN"></span><p class="icon-desc">IN</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-inc" title="INC"></span><p class="icon-desc">INC</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-indd" title="INDD"></span><p class="icon-desc">INDD</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-indd" title="INDD"></span><p class="icon-desc">INDD</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-inf" title="INF"></span><p class="icon-desc">INF</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-inf" title="INF"></span><p class="icon-desc">INF</p></div>
@ -649,6 +685,8 @@
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-rss" title="RSS"></span><p class="icon-desc">RSS</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-rss" title="RSS"></span><p class="icon-desc">RSS</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-rst" title="RST"></span><p class="icon-desc">RST</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-rtf" title="RTF"></span><p class="icon-desc">RTF</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-rtf" title="RTF"></span><p class="icon-desc">RTF</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-ru" title="RU"></span><p class="icon-desc">RU</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-cla fiv-icon-ru" title="RU"></span><p class="icon-desc">RU</p></div>
@ -1161,6 +1199,8 @@
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-in" title="IN"></span><p class="icon-desc">IN</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-in" title="IN"></span><p class="icon-desc">IN</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-inc" title="INC"></span><p class="icon-desc">INC</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-indd" title="INDD"></span><p class="icon-desc">INDD</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-indd" title="INDD"></span><p class="icon-desc">INDD</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-inf" title="INF"></span><p class="icon-desc">INF</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-inf" title="INF"></span><p class="icon-desc">INF</p></div>
@ -1437,6 +1477,8 @@
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-rss" title="RSS"></span><p class="icon-desc">RSS</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-rss" title="RSS"></span><p class="icon-desc">RSS</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-rst" title="RST"></span><p class="icon-desc">RST</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-rtf" title="RTF"></span><p class="icon-desc">RTF</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-rtf" title="RTF"></span><p class="icon-desc">RTF</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-ru" title="RU"></span><p class="icon-desc">RU</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-viv fiv-icon-ru" title="RU"></span><p class="icon-desc">RU</p></div>
@ -1632,7 +1674,6 @@
</div> </div>
</div> </div>
<div role="tabpanel" class="tab-pane" id="square-o"> <div role="tabpanel" class="tab-pane" id="square-o">
@ -1950,6 +1991,8 @@
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-in" title="IN"></span><p class="icon-desc">IN</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-in" title="IN"></span><p class="icon-desc">IN</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-inc" title="INC"></span><p class="icon-desc">INC</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-indd" title="INDD"></span><p class="icon-desc">INDD</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-indd" title="INDD"></span><p class="icon-desc">INDD</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-inf" title="INF"></span><p class="icon-desc">INF</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-inf" title="INF"></span><p class="icon-desc">INF</p></div>
@ -2226,6 +2269,8 @@
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-rss" title="RSS"></span><p class="icon-desc">RSS</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-rss" title="RSS"></span><p class="icon-desc">RSS</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-rst" title="RST"></span><p class="icon-desc">RST</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-rtf" title="RTF"></span><p class="icon-desc">RTF</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-rtf" title="RTF"></span><p class="icon-desc">RTF</p></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-ru" title="RU"></span><p class="icon-desc">RU</p></div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 text-center"><span class="fiv-sqo fiv-icon-ru" title="RU"></span><p class="icon-desc">RU</p></div>
@ -2421,7 +2466,6 @@
</div> </div>
</div> </div>
</div> </div>
@ -2435,7 +2479,7 @@
<footer class="container"> <footer class="container">
<div class="row"> <div class="row">
<div class="col-12 text-center"> <div class="col-12 text-center">
<p>Brought to you by <a href="https://www.danhendricks.com/?utm_source=github.com&utm_medium=campaign&utm_content=link&utm_campaign=file-icon-vectors">Daniel M. Hendricks</a></p> <p>Brought to you by <a href="https://www.danhendricks.com/?utm_source=github.com&utm_medium=campaign&utm_content=link&utm_campaign=file-icon-vectors" class="notranslate">Daniel M. Hendricks</a></p>
</div> </div>
<div class="col-12 text-center"> <div class="col-12 text-center">
@ -2448,18 +2492,21 @@
</div> </div>
</div> </div>
<div class="col-12 text-center ga-beacon">
<a href="https://ga-beacon.appspot.com/?utm_source=github.com&utm_medium=campaign&utm_content=button&utm_campaign=file-icon-vectors-demo"><img src="https://ga-beacon.appspot.com/UA-67333102-2/dmhendricks/file-icon-vectors?flat" /></a>
</div>
</div> </div>
</footer> </footer>
<img src="https://ga-beacon.appspot.com/UA-67333102-2/dmhendricks/file-icon-vectors/demo?pixel" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SocialIcons/1.0.1/soc.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SocialIcons/1.0.1/soc.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- Google Translate -->
<script type="text/javascript">function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); }</script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-67333102-2"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-67333102-2");</script>
</body> </body>
</html> </html>