Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
                <div class="search">
    <input type="search" id="filter" placeholder='Search' />
  </div>
<article class='content'>
  <div id='slats'>
    <ul>


  <li class='fontawesome-glass'>
    <h3>Glass</h3>
    <p>wine, martini, cup</p>
  </li>

  <li class='fontawesome-music'>
    <h3>Music</h3>
    <p>note, clef, mp3</p>
  </li>

  <li class='fontawesome-search'>
    <h3>Search</h3>
    <p>magnifying glass, zoom</p>
  </li>

  <li class='fontawesome-envelope-alt'>
    <h3>Envelope-alt</h3>
    <p>letter, contact, email, e-mail</p>
  </li>

  <li class='fontawesome-heart'>
    <h3>Heart</h3>
    <p>favourite, love, like, rate, rating</p>
  </li>

  <li class='fontawesome-star'>
    <h3>Star</h3>
    <p>favourite, love, like, rate, rating</p>
  </li>

  <li class='fontawesome-star-empty'>
    <h3>Star-empty</h3>
    <p>favourite, love, like</p>
  </li>

  <li class='fontawesome-user'>
    <h3>User</h3>
    <p>person, man, woman</p>
  </li>

  <li class='fontawesome-film'>
    <h3>Film</h3>
    <p>movie, entertainment</p>
  </li>

  <li class='fontawesome-th-large'>
    <h3>Th-large</h3>
    <p>grid, window</p>
  </li>

  <li class='fontawesome-th'>
    <h3>Th</h3>
    <p>grid, window</p>
  </li>

  <li class='fontawesome-th-list'>
    <h3>Th-list</h3>
    <p></p>
  </li>

  <li class='fontawesome-ok'>
    <h3>Ok</h3>
    <p>check</p>
  </li>

  <li class='fontawesome-remove'>
    <h3>Remove</h3>
    <p>x, delete</p>
  </li>

  <li class='fontawesome-zoom-in'>
    <h3>Zoom-in</h3>
    <p>magnifying glass, larger</p>
  </li>

  <li class='fontawesome-zoom-out'>
    <h3>Zoom-out</h3>
    <p>magnifying glass, smaller</p>
  </li>

  <li class='fontawesome-off'>
    <h3>Off</h3>
    <p>power</p>
  </li>

  <li class='fontawesome-signal'>
    <h3>Signal</h3>
    <p>bar graph, chart, stats, statistics</p>
  </li>

  <li class='fontawesome-cog'>
    <h3>Cog</h3>
    <p>gear, work</p>
  </li>

  <li class='fontawesome-trash'>
    <h3>Trash</h3>
    <p>delete, remove, recycle</p>
  </li>

  <li class='fontawesome-home'>
    <h3>Home</h3>
    <p>house</p>
  </li>

  <li class='fontawesome-file-alt'>
    <h3>File-alt</h3>
    <p>doument, Word, text, write</p>
  </li>

  <li class='fontawesome-time'>
    <h3>Time</h3>
    <p>clock, watch</p>
  </li>

  <li class='fontawesome-road'>
    <h3>Road</h3>
    <p>street, car, drive, map, direction</p>
  </li>

  <li class='fontawesome-download-alt'>
    <h3>Download-alt</h3>
    <p>in, inbox</p>
  </li>

  <li class='fontawesome-download'>
    <h3>Download</h3>
    <p>in, inbox</p>
  </li>

  <li class='fontawesome-upload'>
    <h3>Upload</h3>
    <p>up arrow, circle</p>
  </li>

  <li class='fontawesome-inbox'>
    <h3>Inbox</h3>
    <p></p>
  </li>

  <li class='fontawesome-play-circle'>
    <h3>Play-circle</h3>
    <p>right, triangle circle</p>
  </li>

  <li class='fontawesome-repeat'>
    <h3>Repeat</h3>
    <p>arrow, circle</p>
  </li>

  <li class='fontawesome-refresh'>
    <h3>Refresh</h3>
    <p>arrow, circle</p>
  </li>

  <li class='fontawesome-list-alt'>
    <h3>List-alt</h3>
    <p>list, window</p>
  </li>

  <li class='fontawesome-lock'>
    <h3>Lock</h3>
    <p>key, lock</p>
  </li>

  <li class='fontawesome-flag'>
    <h3>Flag</h3>
    <p></p>
  </li>

  <li class='fontawesome-headphones'>
    <h3>Headphones</h3>
    <p>sound</p>
  </li>

  <li class='fontawesome-volume-off'>
    <h3>Volume-off</h3>
    <p>sound, speaker</p>
  </li>

  <li class='fontawesome-volume-down'>
    <h3>Volume-down</h3>
    <p>sound, speaker</p>
  </li>

  <li class='fontawesome-volume-up'>
    <h3>Volume-up</h3>
    <p>sound, speaker</p>
  </li>

  <li class='fontawesome-qrcode'>
    <h3>Qrcode</h3>
    <p>square, scan</p>
  </li>

  <li class='fontawesome-barcode'>
    <h3>Barcode</h3>
    <p>rectangle, scan</p>
  </li>

  <li class='fontawesome-tag'>
    <h3>Tag</h3>
    <p>price tag</p>
  </li>

  <li class='fontawesome-tags'>
    <h3>Tags</h3>
    <p>price tag</p>
  </li>

  <li class='fontawesome-book'>
    <h3>Book</h3>
    <p>Document, novel, Kindle, ebook, ibook</p>
  </li>

  <li class='fontawesome-bookmark'>
    <h3>Bookmark</h3>
    <p>Page, save, reminder</p>
  </li>

  <li class='fontawesome-print'>
    <h3>Print</h3>
    <p>Page, document</p>
  </li>

  <li class='fontawesome-camera'>
    <h3>Camera</h3>
    <p>Photo, picture, film, lense</p>
  </li>

  <li class='fontawesome-font'>
    <h3>Font</h3>
    <p>Letter, document, text</p>
  </li>

  <li class='fontawesome-bold'>
    <h3>Bold</h3>
    <p>Letter, document, text</p>
  </li>

  <li class='fontawesome-italic'>
    <h3>Italic</h3>
    <p>Letter, document, text</p>
  </li>

  <li class='fontawesome-text-height'>
    <h3>Text-height</h3>
    <p>Letter, document, text, line height</p>
  </li>

  <li class='fontawesome-text-width'>
    <h3>Text-width</h3>
    <p>Letter, document, text</p>
  </li>

  <li class='fontawesome-align-left'>
    <h3>Align-left</h3>
    <p>Letter, document, text</p>
  </li>

  <li class='fontawesome-align-center'>
    <h3>Align-center</h3>
    <p>Letter, document, text</p>
  </li>

  <li class='fontawesome-align-right'>
    <h3>Align-right</h3>
    <p>Letter, document, text</p>
  </li>

  <li class='fontawesome-align-justify'>
    <h3>Align-justify</h3>
    <p>Letter, document, text</p>
  </li>

  <li class='fontawesome-list'>
    <h3>List</h3>
    <p>Text, menu</p>
  </li>

  <li class='fontawesome-indent-left'>
    <h3>Indent-left</h3>
    <p>Text, formatting, align</p>
  </li>

  <li class='fontawesome-indent-right'>
    <h3>Indent-right</h3>
    <p>Text, formatting, align</p>
  </li>

  <li class='fontawesome-facetime-video'>
    <h3>Facetime-video</h3>
    <p>Video, webcam</p>
  </li>

  <li class='fontawesome-picture'>
    <h3>Picture</h3>
    <p>Photo, image</p>
  </li>

  <li class='fontawesome-pencil'>
    <h3>Pencil</h3>
    <p>Write</p>
  </li>

  <li class='fontawesome-map-marker'>
    <h3>Map-marker</h3>
    <p>Location</p>
  </li>

  <li class='fontawesome-adjust'>
    <h3>Adjust</h3>
    <p></p>
  </li>

  <li class='fontawesome-tint'>
    <h3>Tint</h3>
    <p></p>
  </li>

  <li class='fontawesome-edit'>
    <h3>Edit</h3>
    <p></p>
  </li>

  <li class='fontawesome-share'>
    <h3>Share</h3>
    <p></p>
  </li>

  <li class='fontawesome-check'>
    <h3>Check</h3>
    <p></p>
  </li>

  <li class='fontawesome-move'>
    <h3>Move</h3>
    <p></p>
  </li>

  <li class='fontawesome-step-backward'>
    <h3>Step-backward</h3>
    <p></p>
  </li>

  <li class='fontawesome-fast-backward'>
    <h3>Fast-backward</h3>
    <p></p>
  </li>

  <li class='fontawesome-backward'>
    <h3>Backward</h3>
    <p></p>
  </li>

  <li class='fontawesome-play'>
    <h3>Play</h3>
    <p></p>
  </li>

  <li class='fontawesome-pause'>
    <h3>Pause</h3>
    <p></p>
  </li>

  <li class='fontawesome-stop'>
    <h3>Stop</h3>
    <p></p>
  </li>

  <li class='fontawesome-forward'>
    <h3>Forward</h3>
    <p></p>
  </li>

  <li class='fontawesome-fast-forward'>
    <h3>Fast-forward</h3>
    <p></p>
  </li>

  <li class='fontawesome-step-forward'>
    <h3>Step-forward</h3>
    <p></p>
  </li>

  <li class='fontawesome-eject'>
    <h3>Eject</h3>
    <p></p>
  </li>

  <li class='fontawesome-chevron-left'>
    <h3>Chevron-left</h3>
    <p></p>
  </li>

  <li class='fontawesome-chevron-right'>
    <h3>Chevron-right</h3>
    <p></p>
  </li>

  <li class='fontawesome-plus-sign'>
    <h3>Plus-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-minus-sign'>
    <h3>Minus-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-remove-sign'>
    <h3>Remove-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-ok-sign'>
    <h3>Ok-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-question-sign'>
    <h3>Question-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-info-sign'>
    <h3>Info-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-screenshot'>
    <h3>Screenshot</h3>
    <p></p>
  </li>

  <li class='fontawesome-remove-circle'>
    <h3>Remove-circle</h3>
    <p></p>
  </li>

  <li class='fontawesome-ok-circle'>
    <h3>Ok-circle</h3>
    <p></p>
  </li>

  <li class='fontawesome-ban-circle'>
    <h3>Ban-circle</h3>
    <p></p>
  </li>

  <li class='fontawesome-arrow-left'>
    <h3>Arrow-left</h3>
    <p></p>
  </li>

  <li class='fontawesome-arrow-right'>
    <h3>Arrow-right</h3>
    <p></p>
  </li>

  <li class='fontawesome-arrow-up'>
    <h3>Arrow-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-arrow-down'>
    <h3>Arrow-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-share-alt'>
    <h3>Share-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-resize-full'>
    <h3>Resize-full</h3>
    <p></p>
  </li>

  <li class='fontawesome-resize-small'>
    <h3>Resize-small</h3>
    <p></p>
  </li>

  <li class='fontawesome-plus'>
    <h3>Plus</h3>
    <p></p>
  </li>

  <li class='fontawesome-minus'>
    <h3>Minus</h3>
    <p></p>
  </li>

  <li class='fontawesome-asterisk'>
    <h3>Asterisk</h3>
    <p></p>
  </li>

  <li class='fontawesome-exclamation-sign'>
    <h3>Exclamation-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-gift'>
    <h3>Gift</h3>
    <p></p>
  </li>

  <li class='fontawesome-leaf'>
    <h3>Leaf</h3>
    <p></p>
  </li>

  <li class='fontawesome-fire'>
    <h3>Fire</h3>
    <p></p>
  </li>

  <li class='fontawesome-eye-open'>
    <h3>Eye-open</h3>
    <p></p>
  </li>

  <li class='fontawesome-eye-close'>
    <h3>Eye-close</h3>
    <p></p>
  </li>

  <li class='fontawesome-warning-sign'>
    <h3>Warning-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-plane'>
    <h3>Plane</h3>
    <p></p>
  </li>

  <li class='fontawesome-calendar'>
    <h3>Calendar</h3>
    <p></p>
  </li>

  <li class='fontawesome-random'>
    <h3>Random</h3>
    <p></p>
  </li>

  <li class='fontawesome-comment'>
    <h3>Comment</h3>
    <p></p>
  </li>

  <li class='fontawesome-magnet'>
    <h3>Magnet</h3>
    <p></p>
  </li>

  <li class='fontawesome-chevron-up'>
    <h3>Chevron-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-chevron-down'>
    <h3>Chevron-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-retweet'>
    <h3>Retweet</h3>
    <p></p>
  </li>

  <li class='fontawesome-shopping-cart'>
    <h3>Shopping-cart</h3>
    <p></p>
  </li>

  <li class='fontawesome-folder-close'>
    <h3>Folder-close</h3>
    <p></p>
  </li>

  <li class='fontawesome-folder-open'>
    <h3>Folder-open</h3>
    <p></p>
  </li>

  <li class='fontawesome-resize-vertical'>
    <h3>Resize-vertical</h3>
    <p></p>
  </li>

  <li class='fontawesome-resize-horizontal'>
    <h3>Resize-horizontal</h3>
    <p></p>
  </li>

  <li class='fontawesome-bar-chart'>
    <h3>Bar-chart</h3>
    <p></p>
  </li>

  <li class='fontawesome-twitter-sign'>
    <h3>Twitter-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-facebook-sign'>
    <h3>Facebook-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-camera-retro'>
    <h3>Camera-retro</h3>
    <p></p>
  </li>

  <li class='fontawesome-key'>
    <h3>Key</h3>
    <p></p>
  </li>

  <li class='fontawesome-cogs'>
    <h3>Cogs</h3>
    <p></p>
  </li>

  <li class='fontawesome-comments'>
    <h3>Comments</h3>
    <p></p>
  </li>
<!--
  <li class='fontawesome-thumbs-up-alt'>
    <h3>Thumbs-up-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-thumbs-down-alt'>
    <h3>Thumbs-down-alt</h3>
    <p></p>
  </li>
-->
  <li class='fontawesome-star-half'>
    <h3>Star-half</h3>
    <p></p>
  </li>

  <li class='fontawesome-heart-empty'>
    <h3>Heart-empty</h3>
    <p></p>
  </li>

  <li class='fontawesome-signout'>
    <h3>Signout</h3>
    <p></p>
  </li>

  <li class='fontawesome-linkedin-sign'>
    <h3>Linkedin-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-pushpin'>
    <h3>Pushpin</h3>
    <p></p>
  </li>

  <li class='fontawesome-external-link'>
    <h3>External-link</h3>
    <p></p>
  </li>

  <li class='fontawesome-signin'>
    <h3>Signin</h3>
    <p></p>
  </li>

  <li class='fontawesome-trophy'>
    <h3>Trophy</h3>
    <p></p>
  </li>

  <li class='fontawesome-github-sign'>
    <h3>Github-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-upload-alt'>
    <h3>Upload-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-lemon'>
    <h3>Lemon</h3>
    <p></p>
  </li>

  <li class='fontawesome-phone'>
    <h3>Phone</h3>
    <p></p>
  </li>

  <li class='fontawesome-check-empty'>
    <h3>Check-empty</h3>
    <p></p>
  </li>

  <li class='fontawesome-bookmark-empty'>
    <h3>Bookmark-empty</h3>
    <p></p>
  </li>

  <li class='fontawesome-phone-sign'>
    <h3>Phone-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-twitter'>
    <h3>Twitter</h3>
    <p></p>
  </li>

  <li class='fontawesome-facebook'>
    <h3>Facebook</h3>
    <p></p>
  </li>

  <li class='fontawesome-github'>
    <h3>Github</h3>
    <p></p>
  </li>

  <li class='fontawesome-unlock'>
    <h3>Unlock</h3>
    <p></p>
  </li>

  <li class='fontawesome-credit-card'>
    <h3>Credit-card</h3>
    <p></p>
  </li>

  <li class='fontawesome-rss'>
    <h3>Rss</h3>
    <p></p>
  </li>

  <li class='fontawesome-hdd'>
    <h3>Hdd</h3>
    <p></p>
  </li>

  <li class='fontawesome-bullhorn'>
    <h3>Bullhorn</h3>
    <p></p>
  </li>

  <li class='fontawesome-bell'>
    <h3>Bell</h3>
    <p></p>
  </li>

  <li class='fontawesome-certificate'>
    <h3>Certificate</h3>
    <p></p>
  </li>

  <li class='fontawesome-hand-right'>
    <h3>Hand-right</h3>
    <p></p>
  </li>

  <li class='fontawesome-hand-left'>
    <h3>Hand-left</h3>
    <p></p>
  </li>

  <li class='fontawesome-hand-up'>
    <h3>Hand-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-hand-down'>
    <h3>Hand-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-circle-arrow-left'>
    <h3>Circle-arrow-left</h3>
    <p></p>
  </li>

  <li class='fontawesome-circle-arrow-right'>
    <h3>Circle-arrow-right</h3>
    <p></p>
  </li>

  <li class='fontawesome-circle-arrow-up'>
    <h3>Circle-arrow-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-circle-arrow-down'>
    <h3>Circle-arrow-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-globe'>
    <h3>Globe</h3>
    <p></p>
  </li>

  <li class='fontawesome-wrench'>
    <h3>Wrench</h3>
    <p></p>
  </li>

  <li class='fontawesome-tasks'>
    <h3>Tasks</h3>
    <p></p>
  </li>

  <li class='fontawesome-filter'>
    <h3>Filter</h3>
    <p></p>
  </li>

  <li class='fontawesome-briefcase'>
    <h3>Briefcase</h3>
    <p></p>
  </li>

  <li class='fontawesome-fullscreen'>
    <h3>Fullscreen</h3>
    <p></p>
  </li>

  <li class='fontawesome-group'>
    <h3>Group</h3>
    <p></p>
  </li>

  <li class='fontawesome-link'>
    <h3>Link</h3>
    <p></p>
  </li>

  <li class='fontawesome-cloud'>
    <h3>Cloud</h3>
    <p></p>
  </li>

  <li class='fontawesome-beaker'>
    <h3>Beaker</h3>
    <p></p>
  </li>

  <li class='fontawesome-cut'>
    <h3>Cut</h3>
    <p></p>
  </li>

  <li class='fontawesome-copy'>
    <h3>Copy</h3>
    <p></p>
  </li>

  <li class='fontawesome-paper-clip'>
    <h3>Paper-clip</h3>
    <p></p>
  </li>

  <li class='fontawesome-save'>
    <h3>Save</h3>
    <p></p>
  </li>

  <li class='fontawesome-sign-blank'>
    <h3>Sign-blank</h3>
    <p></p>
  </li>

  <li class='fontawesome-reorder'>
    <h3>Reorder</h3>
    <p></p>
  </li>

  <li class='fontawesome-list-ul'>
    <h3>List-ul</h3>
    <p></p>
  </li>

  <li class='fontawesome-list-ol'>
    <h3>List-ol</h3>
    <p></p>
  </li>

  <li class='fontawesome-strikethrough'>
    <h3>Strikethrough</h3>
    <p></p>
  </li>

  <li class='fontawesome-underline'>
    <h3>Underline</h3>
    <p></p>
  </li>

  <li class='fontawesome-table'>
    <h3>Table</h3>
    <p></p>
  </li>

  <li class='fontawesome-magic'>
    <h3>Magic</h3>
    <p></p>
  </li>

  <li class='fontawesome-truck'>
    <h3>Truck</h3>
    <p></p>
  </li>

  <li class='fontawesome-pinterest'>
    <h3>Pinterest</h3>
    <p></p>
  </li>

  <li class='fontawesome-pinterest-sign'>
    <h3>Pinterest-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-google-plus-sign'>
    <h3>Google-plus-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-google-plus'>
    <h3>Google-plus</h3>
    <p></p>
  </li>

  <li class='fontawesome-money'>
    <h3>Money</h3>
    <p></p>
  </li>

  <li class='fontawesome-caret-down'>
    <h3>Caret-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-caret-up'>
    <h3>Caret-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-caret-left'>
    <h3>Caret-left</h3>
    <p></p>
  </li>

  <li class='fontawesome-caret-right'>
    <h3>Caret-right</h3>
    <p></p>
  </li>

  <li class='fontawesome-columns'>
    <h3>Columns</h3>
    <p></p>
  </li>

  <li class='fontawesome-sort'>
    <h3>Sort</h3>
    <p></p>
  </li>

  <li class='fontawesome-sort-down'>
    <h3>Sort-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-sort-up'>
    <h3>Sort-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-envelope'>
    <h3>Envelope</h3>
    <p></p>
  </li>

  <li class='fontawesome-linkedin'>
    <h3>Linkedin</h3>
    <p></p>
  </li>

  <li class='fontawesome-undo'>
    <h3>Undo</h3>
    <p></p>
  </li>

  <li class='fontawesome-legal'>
    <h3>Legal</h3>
    <p></p>
  </li>

  <li class='fontawesome-dashboard'>
    <h3>Dashboard</h3>
    <p></p>
  </li>

  <li class='fontawesome-comment-alt'>
    <h3>Comment-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-comments-alt'>
    <h3>Comments-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-bolt'>
    <h3>Bolt</h3>
    <p></p>
  </li>

  <li class='fontawesome-sitemap'>
    <h3>Sitemap</h3>
    <p></p>
  </li>

  <li class='fontawesome-umbrella'>
    <h3>Umbrella</h3>
    <p></p>
  </li>

  <li class='fontawesome-paste'>
    <h3>Paste</h3>
    <p></p>
  </li>

  <li class='fontawesome-lightbulb'>
    <h3>Lightbulb</h3>
    <p></p>
  </li>

  <li class='fontawesome-exchange'>
    <h3>Exchange</h3>
    <p></p>
  </li>

  <li class='fontawesome-cloud-download'>
    <h3>Cloud-download</h3>
    <p></p>
  </li>

  <li class='fontawesome-cloud-upload'>
    <h3>Cloud-upload</h3>
    <p></p>
  </li>

  <li class='fontawesome-user-md'>
    <h3>User-md</h3>
    <p></p>
  </li>

  <li class='fontawesome-stethoscope'>
    <h3>Stethoscope</h3>
    <p></p>
  </li>

  <li class='fontawesome-suitcase'>
    <h3>Suitcase</h3>
    <p></p>
  </li>

  <li class='fontawesome-bell-alt'>
    <h3>Bell-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-coffee'>
    <h3>Coffee</h3>
    <p></p>
  </li>

  <li class='fontawesome-food'>
    <h3>Food</h3>
    <p></p>
  </li>

  <li class='fontawesome-file-text-alt'>
    <h3>File-text-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-building'>
    <h3>Building</h3>
    <p></p>
  </li>

  <li class='fontawesome-hospital'>
    <h3>Hospital</h3>
    <p></p>
  </li>

  <li class='fontawesome-ambulance'>
    <h3>Ambulance</h3>
    <p></p>
  </li>

  <li class='fontawesome-medkit'>
    <h3>Medkit</h3>
    <p></p>
  </li>

  <li class='fontawesome-fighter-jet'>
    <h3>Fighter-jet</h3>
    <p></p>
  </li>

  <li class='fontawesome-beer'>
    <h3>Beer</h3>
    <p></p>
  </li>

  <li class='fontawesome-h-sign'>
    <h3>H-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-plus-sign-alt'>
    <h3>Plus-sign-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-double-angle-left'>
    <h3>Double-angle-left</h3>
    <p></p>
  </li>

  <li class='fontawesome-double-angle-right'>
    <h3>Double-angle-right</h3>
    <p></p>
  </li>

  <li class='fontawesome-double-angle-up'>
    <h3>Double-angle-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-double-angle-down'>
    <h3>Double-angle-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-angle-left'>
    <h3>Angle-left</h3>
    <p></p>
  </li>

  <li class='fontawesome-angle-right'>
    <h3>Angle-right</h3>
    <p></p>
  </li>

  <li class='fontawesome-angle-up'>
    <h3>Angle-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-angle-down'>
    <h3>Angle-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-desktop'>
    <h3>Desktop</h3>
    <p></p>
  </li>

  <li class='fontawesome-laptop'>
    <h3>Laptop</h3>
    <p></p>
  </li>

  <li class='fontawesome-tablet'>
    <h3>Tablet</h3>
    <p></p>
  </li>

  <li class='fontawesome-mobile-phone'>
    <h3>Mobile-phone</h3>
    <p></p>
  </li>

  <li class='fontawesome-circle-blank'>
    <h3>Circle-blank</h3>
    <p></p>
  </li>

  <li class='fontawesome-quote-left'>
    <h3>Quote-left</h3>
    <p></p>
  </li>

  <li class='fontawesome-quote-right'>
    <h3>Quote-right</h3>
    <p></p>
  </li>

  <li class='fontawesome-spinner'>
    <h3>Spinner</h3>
    <p></p>
  </li>

  <li class='fontawesome-circle'>
    <h3>Circle</h3>
    <p></p>
  </li>

  <li class='fontawesome-reply'>
    <h3>Reply</h3>
    <p></p>
  </li>

  <li class='fontawesome-github-alt'>
    <h3>Github-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-folder-close-alt'>
    <h3>Folder-close-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-folder-open-alt'>
    <h3>Folder-open-alt</h3>
    <p></p>
  </li>
<!--
  <li class='fontawesome-expand-alt'>
    <h3>Expand-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-collapse-alt'>
    <h3>Collapse-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-smile'>
    <h3>Smile</h3>
    <p></p>
  </li>

  <li class='fontawesome-frown'>
    <h3>Frown</h3>
    <p></p>
  </li>

  <li class='fontawesome-meh'>
    <h3>Meh</h3>
    <p></p>
  </li>

  <li class='fontawesome-gamepad'>
    <h3>Gamepad</h3>
    <p></p>
  </li>

  <li class='fontawesome-keyboard'>
    <h3>Keyboard</h3>
    <p></p>
  </li>

  <li class='fontawesome-flag-alt'>
    <h3>Flag-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-flag-checkered'>
    <h3>Flag-checkered</h3>
    <p></p>
  </li>

  <li class='fontawesome-terminal'>
    <h3>Terminal</h3>
    <p></p>
  </li>

  <li class='fontawesome-code'>
    <h3>Code</h3>
    <p></p>
  </li>

  <li class='fontawesome-reply-all'>
    <h3>Reply-all</h3>
    <p></p>
  </li>

  <li class='fontawesome-mail-reply-all'>
    <h3>Mail-reply-all</h3>
    <p></p>
  </li>

  <li class='fontawesome-star-half-empty'>
    <h3>Star-half-empty</h3>
    <p></p>
  </li>

  <li class='fontawesome-location-arrow'>
    <h3>Location-arrow</h3>
    <p></p>
  </li>

  <li class='fontawesome-crop'>
    <h3>Crop</h3>
    <p></p>
  </li>

  <li class='fontawesome-code-fork'>
    <h3>Code-fork</h3>
    <p></p>
  </li>

  <li class='fontawesome-unlink'>
    <h3>Unlink</h3>
    <p></p>
  </li>

  <li class='fontawesome-question'>
    <h3>Question</h3>
    <p></p>
  </li>

  <li class='fontawesome-info'>
    <h3>Info</h3>
    <p></p>
  </li>

  <li class='fontawesome-exclamation'>
    <h3>Exclamation</h3>
    <p></p>
  </li>

  <li class='fontawesome-superscript'>
    <h3>Superscript</h3>
    <p></p>
  </li>

  <li class='fontawesome-subscript'>
    <h3>Subscript</h3>
    <p></p>
  </li>

  <li class='fontawesome-eraser'>
    <h3>Eraser</h3>
    <p></p>
  </li>

  <li class='fontawesome-puzzle-piece'>
    <h3>Puzzle-piece</h3>
    <p></p>
  </li>

  <li class='fontawesome-microphone'>
    <h3>Microphone</h3>
    <p></p>
  </li>

  <li class='fontawesome-microphone-off'>
    <h3>Microphone-off</h3>
    <p></p>
  </li>

  <li class='fontawesome-shield'>
    <h3>Shield</h3>
    <p></p>
  </li>

  <li class='fontawesome-calendar-empty'>
    <h3>Calendar-empty</h3>
    <p></p>
  </li>

  <li class='fontawesome-fire-extinguisher'>
    <h3>Fire-extinguisher</h3>
    <p></p>
  </li>

  <li class='fontawesome-rocket'>
    <h3>Rocket</h3>
    <p></p>
  </li>

  <li class='fontawesome-maxcdn'>
    <h3>Maxcdn</h3>
    <p></p>
  </li>

  <li class='fontawesome-chevron-sign-left'>
    <h3>Chevron-sign-left</h3>
    <p></p>
  </li>

  <li class='fontawesome-chevron-sign-right'>
    <h3>Chevron-sign-right</h3>
    <p></p>
  </li>

  <li class='fontawesome-chevron-sign-up'>
    <h3>Chevron-sign-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-chevron-sign-down'>
    <h3>Chevron-sign-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-html5'>
    <h3>Html5</h3>
    <p></p>
  </li>

  <li class='fontawesome-css3'>
    <h3>Css3</h3>
    <p></p>
  </li>

  <li class='fontawesome-anchor'>
    <h3>Anchor</h3>
    <p></p>
  </li>

  <li class='fontawesome-unlock-alt'>
    <h3>Unlock-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-bullseye'>
    <h3>Bullseye</h3>
    <p></p>
  </li>

  <li class='fontawesome-ellipsis-horizontal'>
    <h3>Ellipsis-horizontal</h3>
    <p></p>
  </li>

  <li class='fontawesome-ellipsis-vertical'>
    <h3>Ellipsis-vertical</h3>
    <p></p>
  </li>

  <li class='fontawesome-rss-sign'>
    <h3>Rss-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-play-sign'>
    <h3>Play-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-ticket'>
    <h3>Ticket</h3>
    <p></p>
  </li>

  <li class='fontawesome-minus-sign-alt'>
    <h3>Minus-sign-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-check-minus'>
    <h3>Check-minus</h3>
    <p></p>
  </li>

  <li class='fontawesome-level-up'>
    <h3>Level-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-level-down'>
    <h3>Level-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-check-sign'>
    <h3>Check-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-edit-sign'>
    <h3>Edit-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-external-link-sign'>
    <h3>External-link-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-share-sign'>
    <h3>Share-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-compass'>
    <h3>Compass</h3>
    <p></p>
  </li>

  <li class='fontawesome-collapse'>
    <h3>Collapse</h3>
    <p></p>
  </li>

  <li class='fontawesome-collapse-top'>
    <h3>Collapse-top</h3>
    <p></p>
  </li>

  <li class='fontawesome-expand'>
    <h3>Expand</h3>
    <p></p>
  </li>

  <li class='fontawesome-eur'>
    <h3>Eur</h3>
    <p></p>
  </li>

  <li class='fontawesome-gbp'>
    <h3>Gbp</h3>
    <p></p>
  </li>

  <li class='fontawesome-usd'>
    <h3>Usd</h3>
    <p></p>
  </li>

  <li class='fontawesome-inr'>
    <h3>Inr</h3>
    <p></p>
  </li>

  <li class='fontawesome-jpy'>
    <h3>Jpy</h3>
    <p></p>
  </li>

  <li class='fontawesome-cny'>
    <h3>Cny</h3>
    <p></p>
  </li>

  <li class='fontawesome-krw'>
    <h3>Krw</h3>
    <p></p>
  </li>

  <li class='fontawesome-btc'>
    <h3>Btc</h3>
    <p></p>
  </li>
-->
  <li class='fontawesome-file'>
    <h3>File</h3>
    <p></p>
  </li>
<!--
  <li class='fontawesome-file-text'>
    <h3>File-text</h3>
    <p></p>
  </li>

  <li class='fontawesome-sort-by-alphabet'>
    <h3>Sort-by-alphabet</h3>
    <p></p>
  </li>

  <li class='fontawesome-sort-by-alphabet-alt'>
    <h3>Sort-by-alphabet-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-sort-by-attributes'>
    <h3>Sort-by-attributes</h3>
    <p></p>
  </li>

  <li class='fontawesome-sort-by-attributes-alt'>
    <h3>Sort-by-attributes-alt</h3>
    <p></p>
  </li>

  <li class='fontawesome-sort-by-order'>
    <h3>Sort-by-order</h3>
    <p></p>
  </li>

  <li class='fontawesome-sort-by-order-alt'>
    <h3>Sort-by-order-alt</h3>
    <p></p>
  </li>
-->
  <li class='fontawesome-thumbs-up'>
    <h3>Thumbs-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-thumbs-down'>
    <h3>Thumbs-down</h3>
    <p></p>
  </li>
<!--
  <li class='fontawesome-youtube-sign'>
    <h3>Youtube-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-youtube'>
    <h3>Youtube</h3>
    <p></p>
  </li>

  <li class='fontawesome-xing'>
    <h3>Xing</h3>
    <p></p>
  </li>

  <li class='fontawesome-xing-sign'>
    <h3>Xing-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-youtube-play'>
    <h3>Youtube-play</h3>
    <p></p>
  </li>

  <li class='fontawesome-dropbox'>
    <h3>Dropbox</h3>
    <p></p>
  </li>

  <li class='fontawesome-stackexchange'>
    <h3>Stackexchange</h3>
    <p></p>
  </li>

  <li class='fontawesome-instagram'>
    <h3>Instagram</h3>
    <p></p>
  </li>

  <li class='fontawesome-flickr'>
    <h3>Flickr</h3>
    <p></p>
  </li>

  <li class='fontawesome-adn'>
    <h3>Adn</h3>
    <p></p>
  </li>

  <li class='fontawesome-bitbucket'>
    <h3>Bitbucket</h3>
    <p></p>
  </li>

  <li class='fontawesome-bitbucket-sign'>
    <h3>Bitbucket-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-tumblr'>
    <h3>Tumblr</h3>
    <p></p>
  </li>

  <li class='fontawesome-tumblr-sign'>
    <h3>Tumblr-sign</h3>
    <p></p>
  </li>

  <li class='fontawesome-long-arrow-down'>
    <h3>Long-arrow-down</h3>
    <p></p>
  </li>

  <li class='fontawesome-long-arrow-up'>
    <h3>Long-arrow-up</h3>
    <p></p>
  </li>

  <li class='fontawesome-long-arrow-left'>
    <h3>Long-arrow-left</h3>
    <p></p>
  </li>

  <li class='fontawesome-long-arrow-right'>
    <h3>Long-arrow-right</h3>
    <p></p>
  </li>

  <li class='fontawesome-apple'>
    <h3>Apple</h3>
    <p></p>
  </li>

  <li class='fontawesome-windows'>
    <h3>Windows</h3>
    <p></p>
  </li>

  <li class='fontawesome-android'>
    <h3>Android</h3>
    <p></p>
  </li>

  <li class='fontawesome-linux'>
    <h3>Linux</h3>
    <p></p>
  </li>

  <li class='fontawesome-dribbble'>
    <h3>Dribbble</h3>
    <p></p>
  </li>

  <li class='fontawesome-skype'>
    <h3>Skype</h3>
    <p></p>
  </li>

  <li class='fontawesome-foursquare'>
    <h3>Foursquare</h3>
    <p></p>
  </li>

  <li class='fontawesome-trello'>
    <h3>Trello</h3>
    <p></p>
  </li>

  <li class='fontawesome-female'>
    <h3>Female</h3>
    <p></p>
  </li>

  <li class='fontawesome-male'>
    <h3>Male</h3>
    <p></p>
  </li>

  <li class='fontawesome-gittip'>
    <h3>Gittip</h3>
    <p></p>
  </li>

  <li class='fontawesome-sun'>
    <h3>Sun</h3>
    <p></p>
  </li>

  <li class='fontawesome-moon'>
    <h3>Moon</h3>
    <p></p>
  </li>

  <li class='fontawesome-archive'>
    <h3>Archive</h3>
    <p></p>
  </li>

  <li class='fontawesome-bug'>
    <h3>Bug</h3>
    <p></p>
  </li>

  <li class='fontawesome-vk'>
    <h3>Vk</h3>
    <p></p>
  </li>

  <li class='fontawesome-weibo'>
    <h3>Weibo</h3>
    <p></p>
  </li>

  <li class='fontawesome-renren'>
    <h3>Renren</h3>
    <p></p>-->
  </li>
      
      
    </ul>  
  
  <aside>
    <p>Yes, I'm still filling out the key words. :(</p>
  </aside>
  </div>
</article>
            
          
!

CSS

            
              @import "compass/css3";

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

html {
  background: $dkblue;
  -webkit-font-smoothing: antialiased;
}

.content {
  text-align: center;
}

#filter {
  display: block;
  margin: 1.5em auto 1.5em;
  text-align: center;
  min-width: 300px;
  //width: 50%;
  border-radius: 30px;
  border-width: 0;
  padding: .25em;
  outline: none;
  box-shadow: 0 15px 0 -4px rgba(0,0,0,.1);
  transition: all .3s ease-in;
  &:focus {
    box-shadow: 0 7px 0 -4px rgba(0,0,0,.1);      
    width: 60%;
      font-size: 1.5em;
  }
}


#slats {
  color: #fff;
  li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 160px;
    margin: .5em .5em 1em;
    line-height: 1.2;
    font-size: .8em;
    &:before {
      font-size: 2.2em;
    }
  }
  .hidden {
    display: none;
  }

  h3 {
    font-size: 1.2em;
    margin: 0;
  }
}


            
          
!

JS

            
              $("#filter").focus().keyup(function() {
//$("#filter").keyup(function() {
  var filter = $(this).val();
  $("#slats li").each(function () {
    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
      $(this).addClass('hidden');
    } else {
      $(this).removeClass('hidden');
    }
  });
});
            
          
!
999px

Console