castlecss-docs
Version:
Documentation website for CastleCSS
69 lines (62 loc) • 7.13 kB
HTML
{% set currentPageId = 'icons' %}{% set pageTitle = 'Icons - CastleCSS' %}{% include "inc/header.html" %}
<!-- Main -->
<div class="b0_12 b4_14 b4_push_01">
<div class="p p-b3-3x">
<div class="block">
<h1>Icons</h1>
<p class="intro">Get awesome icons in your website</p>
<p class="alert">
Note: You need castlecss-icons or the <a href="https://github.com/CastleCSS/castlecss-boilerplate" target="_blank">castlecss-boilerplate</a> for this.
</p>
<p>We include a handy set of icons to get you started. These icons are powered by <a href="http://fontawesome.io/icons/" target="_blank"><i class="fa fa-font-awesome" aria-hidden="true"></i> Font Awesome</a> version (4.7.0).</p><p>The icons are hosted on <a href="https://cdnjs.com/libraries/font-awesome" target="_blank">Cloudflare</a> which makes using the icons even easier! Just include the castlecss-icons in your package.json and you're good to go!</p>
<p>Below are a few examples. Please look at the <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome icons examples</a> to look at the spans for every icon you need.</p>
</div>
<div class="mb-3x">
<h2 class="ta-center ta-left-b3">Example icons</h2>
<div class="g gutter-small ta-center">
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-close" aria-hidden="true"></i></div><span class="docs-code">fa-close</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-calendar" aria-hidden="true"></i></div><span class="docs-code">fa-calendar</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-check" aria-hidden="true"></i></div><span class="docs-code">fa-check</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-check-square" aria-hidden="true"></i></div><span class="docs-code">fa-check-square</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-envelope" aria-hidden="true"></i></div><span class="docs-code">fa-envelope</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-edit" aria-hidden="true"></i></div><span class="docs-code">fa-edit</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-gear" aria-hidden="true"></i></div><span class="docs-code">fa-gear</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-comments" aria-hidden="true"></i></div><span class="docs-code">fa-comments</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-heart" aria-hidden="true"></i></div><span class="docs-code">fa-heart</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-heart-o" aria-hidden="true"></i></div><span class="docs-code">fa-heart-o</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-location-arrow" aria-hidden="true"></i></div><span class="docs-code">fa-location-arrow</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-reorder" aria-hidden="true"></i></div><span class="docs-code">fa-reorder</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-shopping-cart" aria-hidden="true"></i></div><span class="docs-code">fa-shopping-cart</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-angle-double-right" aria-hidden="true"></i></div><span class="docs-code">fa-angle-double-right</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-chevron-right" aria-hidden="true"></i></div><span class="docs-code">fa-chevron-right</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><div class="docs-icon"><i class="fa fa-pied-piper" aria-hidden="true"></i></div><span class="docs-code">fa-pied-piper</span></div>
</div>
<div class="ta-center ta-left-b3 pt pb"><a class="btn" href="http://fontawesome.io/icons#brand" target="_blank"><i class="fa fa-font-awesome"></i> All icons</a></div>
</div>
<div class="mb-2x">
<h2 class="ta-center ta-left-b3">Example social icons</h2>
<div class="g gutter-small ta-center">
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-facebook"></i></a><span class="docs-code">fa-facebook</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-twitter"></i></a><span class="docs-code">fa-twitter</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-flickr"></i></a><span class="docs-code">fa-flickr</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-google-plus"></i></a><span class="docs-code">fa-google-plus</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-snapchat"></i></a><span class="docs-code">fa-snapchat</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-tumblr"></i></a><span class="docs-code">fa-tumblr</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-youtube"></i></a><span class="docs-code">fa-youtube</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-vimeo"></i></a><span class="docs-code">fa-vimeo</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-slack"></i></a><span class="docs-code">fa-slack</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-pinterest"></i></a><span class="docs-code">fa-pinterest</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-whatsapp"></i></a><span class="docs-code">fa-whatsapp</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-github"></i></a><span class="docs-code">fa-github</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-foursquare"></i></a><span class="docs-code">fa-foursquare</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-lastfm"></i></a><span class="docs-code">fa-lastfm</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-wikipedia-w"></i></a><span class="docs-code">fa-wikipedia-w</span></div>
<div class="b0_03 b2_03 b3_03 b5_03"><a href="#" class="docs-icon"><i class="fa fa-tripadvisor"></i></a><span class="docs-code">fa-tripadvisor</span></div>
</div>
<div class="ta-center ta-left-b3 pt pb"><a class="btn" href="http://fontawesome.io/icons#brand" target="_blank"><i class="fa fa-font-awesome"></i> All social icons</a></div>
</div>
{% include "inc/example_buttons.html" %}
</div>
</div>
<!-- End main -->
{% include "inc/footer.html" %}