thalassa-crowsnest
Version:
A vantage point for Thalassa
256 lines (237 loc) • 13.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Glyphicons for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/docs.css" rel="stylesheet">
<!-- Analytics -->
<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-146052-11', 'getbootstrap.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<span class="glyphicon glyphicon-ok"></span>
<h1>Glyphicons for Bootstrap</h1>
<p>The official Bootstrap icon font, featuring 160 glyphs from <a href="http://glyphicons.com" target="_blank">Glyphicons</a>, ready for use in any Bootstrap project. Includes support for IE8+.</p>
<a href="https://github.com/twbs/bootstrap-glyphicons/archive/gh-pages.zip" class="btn btn-outline btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 1.0.0']);">Download from GitHub</a>
<ul class="jumbotron-links">
<li>
<a href="http://github.com/twbs/bootstrap-glyphicons" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
</li>
<li>
<a href="http://getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Bootstrap']);">Bootstrap</a>
</li>
<li>
<a href="http://expo.getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a>
</li>
<li>Version 1.0.0</li>
</ul>
</div>
</div>
<div class="container">
<div class="the-icons">
<span class="glyphicon glyphicon-glass"></span>
<span class="glyphicon glyphicon-music"></span>
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-heart"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-film"></span>
<span class="glyphicon glyphicon-th-large"></span>
<span class="glyphicon glyphicon-th"></span>
<span class="glyphicon glyphicon-th-list"></span>
<span class="glyphicon glyphicon-ok"></span>
<span class="glyphicon glyphicon-remove"></span>
<span class="glyphicon glyphicon-zoom-in"></span>
<span class="glyphicon glyphicon-zoom-out"></span>
<span class="glyphicon glyphicon-off"></span>
<span class="glyphicon glyphicon-signal"></span>
<span class="glyphicon glyphicon-cog"></span>
<span class="glyphicon glyphicon-trash"></span>
<span class="glyphicon glyphicon-home"></span>
<span class="glyphicon glyphicon-file"></span>
<span class="glyphicon glyphicon-time"></span>
<span class="glyphicon glyphicon-road"></span>
<span class="glyphicon glyphicon-download-alt"></span>
<span class="glyphicon glyphicon-download"></span>
<span class="glyphicon glyphicon-upload"></span>
<span class="glyphicon glyphicon-inbox"></span>
<span class="glyphicon glyphicon-play-circle"></span>
<span class="glyphicon glyphicon-repeat"></span>
<span class="glyphicon glyphicon-refresh"></span>
<span class="glyphicon glyphicon-list-alt"></span>
<span class="glyphicon glyphicon-lock"></span>
<span class="glyphicon glyphicon-flag"></span>
<span class="glyphicon glyphicon-headphones"></span>
<span class="glyphicon glyphicon-volume-off"></span>
<span class="glyphicon glyphicon-volume-down"></span>
<span class="glyphicon glyphicon-volume-up"></span>
<span class="glyphicon glyphicon-qrcode"></span>
<span class="glyphicon glyphicon-barcode"></span>
<span class="glyphicon glyphicon-tag"></span>
<span class="glyphicon glyphicon-tags"></span>
<span class="glyphicon glyphicon-book"></span>
<span class="glyphicon glyphicon-bookmark"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-camera"></span>
<span class="glyphicon glyphicon-font"></span>
<span class="glyphicon glyphicon-bold"></span>
<span class="glyphicon glyphicon-italic"></span>
<span class="glyphicon glyphicon-text-height"></span>
<span class="glyphicon glyphicon-text-width"></span>
<span class="glyphicon glyphicon-align-left"></span>
<span class="glyphicon glyphicon-align-center"></span>
<span class="glyphicon glyphicon-align-right"></span>
<span class="glyphicon glyphicon-align-justify"></span>
<span class="glyphicon glyphicon-list"></span>
<span class="glyphicon glyphicon-indent-left"></span>
<span class="glyphicon glyphicon-indent-right"></span>
<span class="glyphicon glyphicon-facetime-video"></span>
<span class="glyphicon glyphicon-picture"></span>
<span class="glyphicon glyphicon-pencil"></span>
<span class="glyphicon glyphicon-map-marker"></span>
<span class="glyphicon glyphicon-adjust"></span>
<span class="glyphicon glyphicon-tint"></span>
<span class="glyphicon glyphicon-edit"></span>
<span class="glyphicon glyphicon-share"></span>
<span class="glyphicon glyphicon-check"></span>
<span class="glyphicon glyphicon-move"></span>
<span class="glyphicon glyphicon-step-backward"></span>
<span class="glyphicon glyphicon-fast-backward"></span>
<span class="glyphicon glyphicon-backward"></span>
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon glyphicon-pause"></span>
<span class="glyphicon glyphicon-stop"></span>
<span class="glyphicon glyphicon-forward"></span>
<span class="glyphicon glyphicon-fast-forward"></span>
<span class="glyphicon glyphicon-step-forward"></span>
<span class="glyphicon glyphicon-eject"></span>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-plus-sign"></span>
<span class="glyphicon glyphicon-minus-sign"></span>
<span class="glyphicon glyphicon-remove-sign"></span>
<span class="glyphicon glyphicon-ok-sign"></span>
<span class="glyphicon glyphicon-question-sign"></span>
<span class="glyphicon glyphicon-info-sign"></span>
<span class="glyphicon glyphicon-screenshot"></span>
<span class="glyphicon glyphicon-remove-circle"></span>
<span class="glyphicon glyphicon-ok-circle"></span>
<span class="glyphicon glyphicon-ban-circle"></span>
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
<span class="glyphicon glyphicon-arrow-up"></span>
<span class="glyphicon glyphicon-arrow-down"></span>
<span class="glyphicon glyphicon-share-alt"></span>
<span class="glyphicon glyphicon-resize-full"></span>
<span class="glyphicon glyphicon-resize-small"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-minus"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="glyphicon glyphicon-gift"></span>
<span class="glyphicon glyphicon-leaf"></span>
<span class="glyphicon glyphicon-fire"></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-eye-close"></span>
<span class="glyphicon glyphicon-warning-sign"></span>
<span class="glyphicon glyphicon-plane"></span>
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon glyphicon-random"></span>
<span class="glyphicon glyphicon-comment"></span>
<span class="glyphicon glyphicon-magnet"></span>
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-retweet"></span>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="glyphicon glyphicon-folder-close"></span>
<span class="glyphicon glyphicon-folder-open"></span>
<span class="glyphicon glyphicon-resize-vertical"></span>
<span class="glyphicon glyphicon-resize-horizontal"></span>
<span class="glyphicon glyphicon-hdd"></span>
<span class="glyphicon glyphicon-bullhorn"></span>
<span class="glyphicon glyphicon-bell"></span>
<span class="glyphicon glyphicon-certificate"></span>
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-thumbs-down"></span>
<span class="glyphicon glyphicon-hand-right"></span>
<span class="glyphicon glyphicon-hand-left"></span>
<span class="glyphicon glyphicon-hand-up"></span>
<span class="glyphicon glyphicon-hand-down"></span>
<span class="glyphicon glyphicon-circle-arrow-right"></span>
<span class="glyphicon glyphicon-circle-arrow-left"></span>
<span class="glyphicon glyphicon-circle-arrow-up"></span>
<span class="glyphicon glyphicon-circle-arrow-down"></span>
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-wrench"></span>
<span class="glyphicon glyphicon-tasks"></span>
<span class="glyphicon glyphicon-filter"></span>
<span class="glyphicon glyphicon-briefcase"></span>
<span class="glyphicon glyphicon-fullscreen"></span>
<span class="glyphicon glyphicon-dashboard"></span>
<span class="glyphicon glyphicon-paperclip"></span>
<span class="glyphicon glyphicon-heart-empty"></span>
<span class="glyphicon glyphicon-link"></span>
<span class="glyphicon glyphicon-phone"></span>
<span class="glyphicon glyphicon-pushpin"></span>
<span class="glyphicon glyphicon-euro"></span>
<span class="glyphicon glyphicon-usd"></span>
<span class="glyphicon glyphicon-gbp"></span>
<span class="glyphicon glyphicon-sort"></span>
<span class="glyphicon glyphicon-sort-by-alphabet"></span>
<span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
<span class="glyphicon glyphicon-sort-by-order"></span>
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
<span class="glyphicon glyphicon-sort-by-attributes"></span>
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
<span class="glyphicon glyphicon-unchecked"></span>
<span class="glyphicon glyphicon-expand"></span>
<span class="glyphicon glyphicon-collapse"></span>
<span class="glyphicon glyphicon-collapse-top"></span>
</div>
</div><!-- /.container -->
<div class="how-to">
<div class="container">
<h2>How to use</h2>
<ol>
<li>
Include the fonts
<p>Copy over all the font files to a <code>/fonts</code> directory near your CSS.</p>
</li>
<li>
Include the CSS or LESS
<p>You have two options for enabling the fonts in your project: vanilla CSS or source LESS. For vanilla CSS, just include the compiled CSS file from the <code>/css</code> in the repository.</p>
<p>For LESS, copy over the .less files from <code>/less</code> into your existing Bootstrap directory. Then import it into <code>bootstrap.less</code> via <code>@import "bootstrap-glyphicons.less";</code>. Recompile when ready.</p>
</li>
<li>
Add some icons!
<p>After you've added the fonts and CSS, you can get to using the icons. For example, <code><span class="glyphicon glyphicon-ok"></span></code>.</p>
</li>
</ol>
</div>
</div>
<div class="footer">
<div class="container">
<p><a href="http://getbootstrap.com">Bootstrap</a> is a front-end framework for fast, sleek, and mobile-first web development.</p>
<p><a href="http://glyphicons.com">Glyphicons</a> is an extensive glyph library created by Jan Kovařík and <a href="http://glyphicons.com/glyphicons-licenses/">made available for Bootstrap</a>. Attribution is not required, but visible links back to <a href="http://glyphicons.com/">Glyphicons</a> are highly appreciated.</p>
<p><a href="https://twitter.com/mdo"><3 @mdo</a></p>
</div>
</div>
</body>
</html>