P3X GitList Demo
GitHub
Repo
Changelog
To do
Releases
Themes
Language
Auto
Afrikaans
العربية
বাংলা
Català
Čeština
Dansk
Deutsch
Ελληνικά
English
Español
Suomi
Français
עברית
Magyar
Italiano
日本語
한국어
Nederlands
Norsk
Polski
Português
Română
Русский
Српски
Svenska
Türkçe
Українська
Tiếng Việt
中文
Change log
Loading change log ...
To do ...
Loading todo ...
browsing:
13c5290eef60a04fe83fdc32b886aa480bc0cb40
Branches
master
Files
Commits
Log
Graph
Stats
stackicons.git
index.html
RSS
Git
Fetch origin
Download
ZIP
TAR
Clone
Delete
Are you sure to delete this file?
Editor
Raw
Blame
History
22kB
346 lines
HTML code
Clone
HTTPS
This file (22kB) exceeds the allowed full mode (48 kb) size. The editor full height is disabled, only scrolling is allowed.
If you wish to edit a file, it is recommended to use the scroll mode as some users do not like the full height mode.
index.html
<!DOCTYPE html> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="UTF-8"> <title>Stackicons - Icon Fonts for Web Designers</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Stackicons are icon fonts for web designers with added flexibility, including multiple button shapes and a unique multi-color option. Free and open source, Stackicons-Social includes finely-crafted icons for over 60 social brands. The Stackicons project is by Parker Bennett, a web designer and front-end developer based in Los Angeles."> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-title" content="Stackicons"> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta property="og:title" content="Stackicons"> <meta property="og:site_name" content="Stackicons"> <meta property="og:image" content="http://stackicons.com/og-image.png"> <meta property="og:image:type" content="image/png"> <link rel="SHORTCUT ICON" href="favicon.ico"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57.png"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" href="css/stackicons-min.css" media="screen" type="text/css" /> <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> <style> </style> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div class="page-wrap"> <header> <div class="wrap"> <h1><a class="stackicons-logo text-left" href="http://stackicons.com"><span></span>Stackicons</a></h1> <h2 class="nobr">Doing More with Icon Fonts</h2> <nav class="nav-top st-shape-icon st-single-color-brand"> <ul> <li><a title="Twitter" class="st-icon-twitter" href="https://twitter.com/stackicons">Twitter</a></li> <li><a title="Facebook" class="st-icon-facebook-alt" href="https://facebook.com/stackicons">Facebook</a></li> <li><a title="Github" class="st-icon-github-alt" href="http://github.com/parkerbennett">Github</a></li> <li><a title="Email" class="st-icon-email" href="mailto:parker@stackicons.com"><span></span>parker@stackicons.com</a></li> <li><a class="button github">Fork Me on GitHub</a></li> </ul> </nav> </div> <!-- end .wrap --> </header> <section class="hero"> <div class="wrap clearfix"> <div class="hero-icons"> <a class="st-icon-dribbble st-multi-color st-shape-icon" href="http://dribbble.com/parkerbennett"><span></span>Dribbble</a> <a class="st-icon-github st-multi-color st-shape-icon" href="http://github.com/parkerbennett"><span></span>Github</a> <a class="st-icon-gmail st-multi-color st-shape-icon" href="mailto:parker@stackicons.com"><span></span>Email</a> <nav class="twitter-row st-multi-color"> <a class="st-icon-twitter st-shape-square" href="https://twitter.com/stackicons">Twitter</a> <a class="st-icon-twitter st-shape-rounded1" href="https://twitter.com/stackicons">Twitter</a> <a class="st-icon-twitter st-shape-rounded2" href="https://twitter.com/stackicons">Twitter</a> <a class="st-icon-twitter st-shape-rounded3" href="https://twitter.com/stackicons">Twitter</a> <a class="st-icon-twitter st-shape-circle" href="https://twitter.com/stackicons">Twitter</a> <a class="st-icon-twitter st-shape-icon" href="https://twitter.com/stackicons">Twitter</a> </nav> </div> <!-- end .hero-icons --> <div class="intro"> <p><strong>Stackicons</strong> are icon fonts for the web, designed to do <span class="nobr">more —</span> <span class="nobr-wide">with multiple</span> button shapes and <span class="nobr">a unique</span> <span class="nobr">“multi-color”</span> option. <span class="nobr-wide">The <strong>Stackicons-Social</strong></span> font and <span class="nobr-wide">Sass-based</span> construction kit are free and open source, created by <a href="http://parkerbennett.com" class="nobr">Parker Bennett</a>.</p> <a class="button download">Download it Free</a> </div> <!-- end .intro --> </div> <!-- end .wrap --> </section> <!-- end .hero --> <section class="news"> <div class="wrap clearfix"> <section class="news-content"> <h2>News</h2> <p class="lede">To kick off the site launch, I wrote an article about Stackicons for <a target="_blank"><strong class="nobr">CSS-Tricks.</strong> <span class="nobr">Check it out!</span></a></p> </section> <section class="signup"> <!-- Begin MailChimp Signup Form --> <div id="mc_embed_signup"> <form action="http://stackicons.us3.list-manage1.com/subscribe/post?u=a1d9b151d29974948b4cdcff9&id=7b1b8c2871" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <label for="mce-EMAIL">Updates?</label> <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;"> <input type="text" name="b_a1d9b151d29974948b4cdcff9_7b1b8c2871" value=""> </div> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> </form> </div> <!--End mc_embed_signup--> </section><!-- end .signup --> </section><!-- end .news-content --> </div> <!-- end .wrap --> </section> <!-- end .news --> <section class="callout-panels clearfix"> <div class="wrap"> <div class="callout-panel-group"> <div class="callout-panel panel1"> <h2>Finely Crafted</h2> <p><strong>Stackicons-Social</strong> includes over 60 up-to-date icons for modern social brands — <span class="nobr">from App.net</span> to Zerply. Each icon was meticulously crafted to look great at multiple sizes, with five different button shapes, from square to circle, or <span class="nobr">icon-only.</span></p> <nav class="nav-social icons-panel1"> <ul> <li><a class="st-icon-twitter st-shape-r0"></a></li> <li><a class="st-icon-facebook st-shape-r1"></a></li> <li><a class="st-icon-googleplus st-shape-r2"></a></li> <li><a class="st-icon-youtube st-shape-r3"></a></li> <li><a class="st-icon-pinterest st-shape-r4"></a></li> <li><a class="st-icon-instagram st-shape-r5"></a></li> </ul> </nav> </div> <!-- end .panel1 --> <div class="callout-panel panel2"> <h2 class="nobr">Easy to Customize</h2> <p>Want to change the default button shape and color style, adjust colors or more? Just change the variables in the Sass construction kit files. <span class="nobr">You can</span> also override with built-in styles. <a class="nobr" href="examples.html" target="_blank">See some examples</a>.</p><p class="nav-list st-shape-icon"><a class="st-icon-codepen">Try it on CodePen</a></p> </div> </div><!-- end .callout-panel-group --> <div class="callout-panel-group"> <div class="callout-panel panel3"> <h2>Colorful</h2> <p>Stackicons <span class="nobr">stack —</span> using overlapping colors to create “multi-color” icons with a contemporary <span class="nobr">flat look.</span> (Think of two-color or screen printing.) <!-- dribbble --> <div class="st-demo"><span class="dribbble-1"></span><span class="dribbble-2"></span><span class="dribbble-3"></span><span class="dribbble-4"></span><b>→</b><a class="st-icon st-multi-color st-icon-dribbble-alt st-shape-icon"><span></span>Dribbble</a></div> </div> <div class="callout-panel panel4"> <h2>Free</h2> <p> <strong>Stackicons-Social</strong> is open source and <strong class="nobr">100% free</strong> for any use. <a class="nobr">Give it a try!</a></p> <small><a href="https://spb.io/AY3rLlt5aG">Want to support the project?</a> Any amount would be a big help. <span class="nobr">As a</span> small thank you, I’ll send you <strong>Stackicons-Social-Complete</strong>, with a few more of my own <span class="nobr">custom icons.</small> <a class="button darker contribute-button" href="https://spb.io/AY3rLlt5aG">Contribute</a> </div> </div><!-- end .callout-panel-group --> </div> <!-- end .wrap --> </section> <section class="font-sample wrap"> <h2 class="font-sample-name">Stackicons-Social</h2> <div class="control-font clearfix"> <div class="control-shape"> <a class="make-icon-only nobr active">icon-only</a><a class="make-square">square</a><a class="make-r1">rounded1</a><a class="make-r2">rounded2</a><a class="make-r3">rounded3</a><a class="make-circle">circle</a> </div> <div class="control-color"><a class="toggle-color active">multi-color</a> </div> </div> <nav class="stackicons-font-sample st-multi-color st-shape-r5"> <!-- inline-block: comment-out white space or don't close tags, or -5px margin-right --> <a title="AddThis" class="st-icon-addthis">Add This</a> <a title="Alt.net" class="st-icon-adn">Alt.net</a> <a title="Amazon" class="st-icon-amazon"><span></span>Amazon</a> <a title="Android" class="st-icon-android"><span></span>Android</a> <a title="Apple" class="st-icon-apple">Apple</a> <a title="Behance" class="st-icon-behance">Behance</a> <a title="Blogger" class="st-icon-blogger">Blogger</a> <a title="CodePen" class="st-icon-codepen">Codepen</a> <a title="Delicious" class="st-icon-delicious"><span></span>Delicious</a> <a title="deviantART" class="st-icon-deviantart"><span></span>Deviant Art</a> <a title="Digg" class="st-icon-digg">Digg</a> <a title="Dribbble" class="st-icon-dribbble"><span></span>Dribbble</a> <a title="Dribbble" class="st-icon-dribbble-alt"><span></span>Dribbble</a> <a title="Dropbox" class="st-icon-dropbox">Dropbox</a> <a title="Ebay" class="st-icon-ebay"><span></span>Ebay</a> <a title="Email" class="st-icon-email"><span></span>Email</a> <a class="st-icon-email2">Email</a> <a title="Evernote" class="st-icon-evernote">Evernote</a> <a title="Facebook" class="st-icon-facebook">Facebook</a> <a title="Facebook" class="st-icon-facebook-alt">Facebook</a> <a title="Flattr" class="st-icon-flattr"><span></span>Flattr</a> <a title="Flickr" class="st-icon-flickr"><span></span>Flickr</a> <a title="Forrst" class="st-icon-forrst"><span></span>Forrst</a> <a title="Foursquare" class="st-icon-foursquare"><span></span>Foursquare</a> <a title="GitHub" class="st-icon-github"><span></span>Github</a> <a title="GitHub" class="st-icon-github-alt"><span></span>Github</a> <a title="Gittip" class="st-icon-gittip">Gittip</a> <a title="Gmail" class="st-icon-gmail"><span></span>Gmail</a> <a title="Gmail" class="st-icon-gmail-alt"><span></span>Gmail</a> <a title="Google" class="st-icon-google">Google</a> <a title="Google+" class="st-icon-googleplus">Google+</a> <a title="IMDb" class="st-icon-imdb"><span></span>IMDb</a> <a title="Instagram" class="st-icon-instagram"><span></span>Instagram</a> <a title="Kickstarter" class="st-icon-kickstarter">Kickstarter</a> <a title="Last.fm" class="st-icon-lastfm">last.fm</a> <a title="LinkedIn" class="st-icon-linkedin">LinkedIn</a> <a title="Microsoft" class="st-icon-microsoft"><span></span>Microsoft</a> <a title="Myspace" class="st-icon-myspace">Myspace</a> <a title="Pandora" class="st-icon-pandora">Pandora</a> <a title="PayPal" class="st-icon-paypal"><span></span>Paypal</a> <a title="PayPal" class="st-icon-paypal2"><span></span>Paypal</a> <a title="Picasa" class="st-icon-picasa"><span><span></span></span>Picasa</a> <a title="Pinboard" class="st-icon-pinboard">Pinboard</a> <a title="Pinterest" class="st-icon-pinterest"><span></span>Pinterest</a> <a title="Rdio" class="st-icon-rdio">Rdio</a> <a title="Reddit" class="st-icon-reddit"><span></span>Reddit</a> <a title="RSS" class="st-icon-rss">RSS</a> <a title="ShareThis" class="st-icon-sharethis">ShareThis</a> <a title="Skype" class="st-icon-skype"><span></span>Skype</a> <a title="SlideShare" class="st-icon-slideshare"><span></span>Slideshare</a> <a title="SoundCloud" class="st-icon-soundcloud">Soundcloud</a> <a title="Spotify" class="st-icon-spotify"><span></span>Spotify</a> <a title="StumbleUpon" class="st-icon-stumbleupon">Stumbleupon</a> <a title="Stack Overflow" class="st-icon-stackoverflow"><span></span>Stack Overflow</a> <a title="Tumblr" class="st-icon-tumblr">Tumblr</a> <a title="Twitter" class="st-icon-twitter">Twitter</a> <a title="Vimeo" class="st-icon-vimeo">Vimeo</a> <a title="Vine" class="st-icon-vine">Vine</a> <a title="Windows" class="st-icon-windows">Windows</a> <a title="Windows 7" class="st-icon-windows7"><span></span>Windows 7</a> <a title="Wordpress" class="st-icon-wordpress">Wordpress</a> <a title="Xing" class="st-icon-xing"><span></span>Xing</a> <a title="Yahoo" class="st-icon-yahoo"><span></span>Yahoo</a> <a title="Yelp" class="st-icon-yelp"><span></span>Yelp</a> <a title="YouTube" class="st-icon-youtube"><span></span>YouTube</a> <a title="YouTube" class="st-icon-youtube2"><span></span>YouTube</a> <a title="YouTube" class="st-icon-youtube-alt"><span></span>YouTube</a> <a title="Zerply" class="st-icon-zerply">Zerply</a> <a title="Search" class="st-icon-search">Search</a> <a class="st-icon-search-alt"><span></span>Search</a> <a title="Menu" class="st-icon-menu">Menu</a> <a title="Menu" class="st-icon-menu-alt">Menu</a> <a title="Menu" class="st-icon-menu-alt2">Menu</a> <a title="More..." class="st-icon-more">More…</a> <a title="Submenu" class="st-icon-triangle-down">More</a> </nav> <a class="toggle-ssmin">View Stackicons-Social</a> </section> <!-- end .font-sample wrap --> <p class="wrap"><small>*A smaller font, Stackicons-Social-Minimal, provides a subset of more commonly used icons.</small></p> <section class="usage wrap"> <h2>Using Stackicons</h2> <p><strong>Stackicons-Social</strong> comes with default CSS that you can link to or @import. There’s a usage guide to get you started, along with <a href="examples.html">some examples</a>.</p> <p>If you’re comfortable using Sass, you can customize things extensively just by changing variables in the Sass construction kit files: brand colors, default size, shape and spacing, hover effects and more.<p> <p>Questions? Suggestions? Need a custom icon font for your own project? <span class="nobr"><a href="mailto:parker@stackicons.com">Email me</a>.</span></p> <a class="button button-small">Download it Free</a><a class="button darker button-small" href="https://spb.io/AY3rLlt5aG"> Contribute Now </a> </section </div> <!-- end .wrap --> <footer> <div class="wrap clearfix"> <div class="copyright"> <p>Copyright © <script language="JavaScript" type="text/javascript">document.write((new Date()).getFullYear());</script><noscript>2014</noscript> Parker Bennett.</p> <p>Stackicons-Social is <a href="http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web" target="_blank">SIL Open Font</a> <span class="link-color">and</span> <a class="nobr"href="http://opensource.org/licenses/MIT" target="_blank">MIT licensed</a>.</p> <p>All copyrights and trademarks are the property <span class="nobr">of their respective owners.</span></p> </div> <small class="right text-right">Hosting by <a href="http://mdtm.pl/1lTyAWF" target="_blank">Media Temple</a>.</small> </footer> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery.js"><\/script>')</script> <script> $('.toggle-color').click(function () { $(this).toggleClass('active'); $('.stackicons-font-sample').toggleClass('st-multi-color'); }); $('.make-square').click(function () { $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active') $(this).addClass('active'); $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r0'); }); $('.make-r1').click(function () { $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active') $(this).addClass('active'); $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r1'); }); $('.make-r2').click(function () { $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active') $(this).addClass('active'); $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r2'); }); $('.make-r3').click(function () { $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active') $(this).addClass('active'); $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r3'); }); $('.make-circle').click(function () { $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active') $(this).addClass('active'); $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r4'); }); $('.make-icon-only').click(function () { $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active') $(this).addClass('active'); $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r5'); }); $('.toggle-ssmin').click(function () { $(this).toggleClass('active'); $('.font-sample-name').toggleClass('active'); $('.stackicons-font-sample .st-icon-addthis, .stackicons-font-sample .st-icon-amazon, .stackicons-font-sample .st-icon-android, .stackicons-font-sample .st-icon-apple, .stackicons-font-sample .st-icon-behance, .stackicons-font-sample .st-icon-blogger, .stackicons-font-sample .st-icon-delicious, .stackicons-font-sample .st-icon-deviantart, .stackicons-font-sample .st-icon-digg, .stackicons-font-sample .st-icon-dropbox, .stackicons-font-sample .st-icon-ebay, .stackicons-font-sample .st-icon-evernote, .stackicons-font-sample .st-icon-flattr, .stackicons-font-sample .st-icon-forrst, .stackicons-font-sample .st-icon-foursquare, .stackicons-font-sample .st-icon-gittip, .stackicons-font-sample .st-icon-google, .stackicons-font-sample .st-icon-imdb, .stackicons-font-sample .st-icon-kickstarter, .stackicons-font-sample .st-icon-lastfm, .stackicons-font-sample .st-icon-microsoft, .stackicons-font-sample .st-icon-myspace, .stackicons-font-sample .st-icon-pandora, .stackicons-font-sample .st-icon-paypal, .stackicons-font-sample .st-icon-paypal2, .stackicons-font-sample .st-icon-picasa, .stackicons-font-sample .st-icon-rdio, .stackicons-font-sample .st-icon-reddit, .stackicons-font-sample .st-icon-sharethis, .stackicons-font-sample .st-icon-skype, .stackicons-font-sample .st-icon-slideshare, .stackicons-font-sample .st-icon-soundcloud, .stackicons-font-sample .st-icon-spotify, .stackicons-font-sample .st-icon-stumbleupon, .stackicons-font-sample .st-icon-stackoverflow, .stackicons-font-sample .st-icon-vine, .stackicons-font-sample .st-icon-windows, .stackicons-font-sample .st-icon-windows7, .stackicons-font-sample .st-icon-wordpress, .stackicons-font-sample .st-icon-xing, .stackicons-font-sample .st-icon-yahoo, .stackicons-font-sample .st-icon-yelp, .stackicons-font-sample .st-icon-zerply, .stackicons-font-sample .st-icon-search-alt, .stackicons-font-sample .st-icon-menu-alt, .stackicons-font-sample .st-icon-menu-alt2, .stackicons-font-sample .st-icon-more').toggleClass('hide'); }); </script> <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','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-47890813-1', 'stackicons.com'); ga('send', 'pageview'); </script> </body> </html>
Keyboard shortcuts
/
Focus search
?
Show this help
Esc
Unfocus input