Files
Font-Awesome-Pro/icons/regular/demo.html
2017-05-12 15:45:19 -04:00

2199 lines
92 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic page needs -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- fort awesome styling/rendering support -->
<link rel="stylesheet" media="all" href="http://kit-download-assets.fortawesome.com/application.css">
<!-- css -->
<link href="css/external.css" rel="stylesheet">
<!-- older browser support -->
<!--[if lt IE 9]> <link href="7abfb655-sd.css" rel="stylesheet"> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
</head>
<body class="v-kit-demo bg-gray-lightest bg-img bg-img-icons">
<div class="wrapper-view">
<div class="view-content">
<div class="bg-gray-dark p-xs-a-xl">
<div class="container text-xs-center">
<h2 class="text-3x font-weight-semibold">
<span class="text-sm text-upper text-tracked m-xs-b-md block text-muted">Fort Awesome Kit Demo</span>
FA5 Regular
</h2>
<p class="lead m-xs-b-0">Below you'll find an inventory and examples of
<a href="#demo-icons">icons</a>,
and how to use them and the support styling.
</p>
</div>
</div>
<div class="dangle-up bg-gray-dark dashed dashed-bottom"></div>
<div class="container m-xs-b-lg">
<div class="well bg-white br-b-0 p-xs-a-lg m-xs-b-0">
<section class="demo-icons m-xs-b-xl" id="demo-icons">
<h2 class="text-xl m-xs-b-0">Your Icons</h2>
<hr class="hr-lg m-xs-y-md">
<ul class="grid-assets grid-assets-animate grid-assets-xs-6 m-xs-b-lg">
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf000;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-book</span>
<span class="text-muted block">f000</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf001;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-envelope</span>
<span class="text-muted block">f001</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf002;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-times-circle</span>
<span class="text-muted block">f002</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf003;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-plus-circle</span>
<span class="text-muted block">f003</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf004;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-exclamation-triangle</span>
<span class="text-muted block">f004</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf005;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-pen</span>
<span class="text-muted block">f005</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf006;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-pen-alt</span>
<span class="text-muted block">f006</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf007;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-pen-square</span>
<span class="text-muted block">f007</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf00a;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-trash-alt</span>
<span class="text-muted block">f00a</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf00b;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-trash</span>
<span class="text-muted block">f00b</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf00c;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-rocket</span>
<span class="text-muted block">f00c</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf00d;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-trophy-alt</span>
<span class="text-muted block">f00d</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf00e;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-trophy</span>
<span class="text-muted block">f00e</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf00f;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-coffee</span>
<span class="text-muted block">f00f</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf010;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-paint-brush</span>
<span class="text-muted block">f010</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf011;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-poo</span>
<span class="text-muted block">f011</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf012;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-paper-plane</span>
<span class="text-muted block">f012</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf013;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-smile</span>
<span class="text-muted block">f013</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf014;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-bomb</span>
<span class="text-muted block">f014</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf015;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-thumbs-up</span>
<span class="text-muted block">f015</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf016;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-thumbs-down</span>
<span class="text-muted block">f016</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf018;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-star-exclamation</span>
<span class="text-muted block">f018</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf019;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-star</span>
<span class="text-muted block">f019</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf01a;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-camera-retro</span>
<span class="text-muted block">f01a</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf01b;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-camera-alt</span>
<span class="text-muted block">f01b</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#x1F4F7;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-camera</span>
<span class="text-muted block">1F4F7</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf01d;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-bullhorn</span>
<span class="text-muted block">f01d</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf01e;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-lock-alt</span>
<span class="text-muted block">f01e</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf01f;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-lock</span>
<span class="text-muted block">f01f</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf020;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-file-alt</span>
<span class="text-muted block">f020</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf021;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-file</span>
<span class="text-muted block">f021</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf022;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-leaf</span>
<span class="text-muted block">f022</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf023;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-flask</span>
<span class="text-muted block">f023</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf024;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-comment-alt</span>
<span class="text-muted block">f024</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf025;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-comment</span>
<span class="text-muted block">f025</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf026;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-code</span>
<span class="text-muted block">f026</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf027;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-edit</span>
<span class="text-muted block">f027</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf028;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-gamepad</span>
<span class="text-muted block">f028</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf029;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-print</span>
<span class="text-muted block">f029</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf02a;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-bars</span>
<span class="text-muted block">f02a</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf02b;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-home</span>
<span class="text-muted block">f02b</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf02c;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-magic</span>
<span class="text-muted block">f02c</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf02d;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-jack-o-lantern</span>
<span class="text-muted block">f02d</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf02e;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-pencil</span>
<span class="text-muted block">f02e</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf02f;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-pencil-alt</span>
<span class="text-muted block">f02f</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf030;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-search</span>
<span class="text-muted block">f030</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf031;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-search-plus</span>
<span class="text-muted block">f031</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf032;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-search-minus</span>
<span class="text-muted block">f032</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf033;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-martini-glass</span>
<span class="text-muted block">f033</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf034;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-music</span>
<span class="text-muted block">f034</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf035;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-user</span>
<span class="text-muted block">f035</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf036;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-film</span>
<span class="text-muted block">f036</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf037;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-th-large</span>
<span class="text-muted block">f037</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf038;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-th</span>
<span class="text-muted block">f038</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf039;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-th-list</span>
<span class="text-muted block">f039</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf03a;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-utensils</span>
<span class="text-muted block">f03a</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf03b;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-utensil-fork</span>
<span class="text-muted block">f03b</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf03c;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-utensil-knife</span>
<span class="text-muted block">f03c</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf03d;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-utensil-spoon</span>
<span class="text-muted block">f03d</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf03e;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-utensils-alt</span>
<span class="text-muted block">f03e</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf03f;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-check</span>
<span class="text-muted block">f03f</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf040;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-check-square</span>
<span class="text-muted block">f040</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf041;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-check-circle</span>
<span class="text-muted block">f041</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf042;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-times</span>
<span class="text-muted block">f042</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf043;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-times-square</span>
<span class="text-muted block">f043</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf044;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-plus</span>
<span class="text-muted block">f044</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf045;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-plus-square</span>
<span class="text-muted block">f045</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf046;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-minus</span>
<span class="text-muted block">f046</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf047;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-minus-square</span>
<span class="text-muted block">f047</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf048;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-minus-circle</span>
<span class="text-muted block">f048</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf049;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-heart</span>
<span class="text-muted block">f049</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf04a;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-diamond</span>
<span class="text-muted block">f04a</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf04b;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-spade</span>
<span class="text-muted block">f04b</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf04c;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-club</span>
<span class="text-muted block">f04c</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf04d;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-square</span>
<span class="text-muted block">f04d</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf04e;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-circle</span>
<span class="text-muted block">f04e</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf04f;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-octagon</span>
<span class="text-muted block">f04f</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf050;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-hexagon</span>
<span class="text-muted block">f050</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf051;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-triangle</span>
<span class="text-muted block">f051</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf052;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-shield</span>
<span class="text-muted block">f052</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf053;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-badge</span>
<span class="text-muted block">f053</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf054;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-shield-check</span>
<span class="text-muted block">f054</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf055;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-badge-check</span>
<span class="text-muted block">f055</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf056;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-times-octagon</span>
<span class="text-muted block">f056</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf057;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-times-hexagon</span>
<span class="text-muted block">f057</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf058;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-plus-octagon</span>
<span class="text-muted block">f058</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf059;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-plus-hexagon</span>
<span class="text-muted block">f059</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf05a;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-minus-octagon</span>
<span class="text-muted block">f05a</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf05b;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-minus-hexagon</span>
<span class="text-muted block">f05b</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf05c;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-power-off</span>
<span class="text-muted block">f05c</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf05d;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-signal</span>
<span class="text-muted block">f05d</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf05e;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-cog</span>
<span class="text-muted block">f05e</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf05f;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-clock</span>
<span class="text-muted block">f05f</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf060;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-watch</span>
<span class="text-muted block">f060</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf061;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-alarm-clock</span>
<span class="text-muted block">f061</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf062;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-stopwatch</span>
<span class="text-muted block">f062</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf063;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-road</span>
<span class="text-muted block">f063</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf064;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-download</span>
<span class="text-muted block">f064</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf065;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-upload</span>
<span class="text-muted block">f065</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf066;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-circle-down</span>
<span class="text-muted block">f066</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf067;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-circle-down</span>
<span class="text-muted block">f067</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf068;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-square-down</span>
<span class="text-muted block">f068</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf069;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-square-down</span>
<span class="text-muted block">f069</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf06a;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-circle-down</span>
<span class="text-muted block">f06a</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf06b;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-square-down</span>
<span class="text-muted block">f06b</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf06c;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-circle-down</span>
<span class="text-muted block">f06c</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf06d;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-square-down</span>
<span class="text-muted block">f06d</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf06e;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-down</span>
<span class="text-muted block">f06e</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf06f;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-down</span>
<span class="text-muted block">f06f</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf070;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-down</span>
<span class="text-muted block">f070</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf071;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-sort</span>
<span class="text-muted block">f071</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf072;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-sort-up</span>
<span class="text-muted block">f072</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf073;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-sort-down</span>
<span class="text-muted block">f073</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf074;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-down</span>
<span class="text-muted block">f074</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf075;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-angle-down</span>
<span class="text-muted block">f075</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf076;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-double-angle-down</span>
<span class="text-muted block">f076</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf077;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-long-arrow-alt-down</span>
<span class="text-muted block">f077</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf078;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-long-arrow-down</span>
<span class="text-muted block">f078</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf079;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-to-bottom</span>
<span class="text-muted block">f079</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf07a;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-from-bottom</span>
<span class="text-muted block">f07a</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf07b;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrows-v</span>
<span class="text-muted block">f07b</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf07c;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrows-alt-v</span>
<span class="text-muted block">f07c</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf07d;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-double-chevron-down</span>
<span class="text-muted block">f07d</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf07e;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-to-bottom</span>
<span class="text-muted block">f07e</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf07f;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-from-bottom</span>
<span class="text-muted block">f07f</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf080;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-circle-up</span>
<span class="text-muted block">f080</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf081;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-circle-right</span>
<span class="text-muted block">f081</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf082;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-circle-left</span>
<span class="text-muted block">f082</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf083;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-circle-up</span>
<span class="text-muted block">f083</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf084;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-circle-right</span>
<span class="text-muted block">f084</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf085;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-circle-left</span>
<span class="text-muted block">f085</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf086;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-square-up</span>
<span class="text-muted block">f086</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf087;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-square-left</span>
<span class="text-muted block">f087</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf088;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-square-right</span>
<span class="text-muted block">f088</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf089;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-square-up</span>
<span class="text-muted block">f089</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf08a;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-square-left</span>
<span class="text-muted block">f08a</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf08b;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-square-right</span>
<span class="text-muted block">f08b</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf08c;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-circle-up</span>
<span class="text-muted block">f08c</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf08d;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-circle-left</span>
<span class="text-muted block">f08d</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf08e;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-circle-right</span>
<span class="text-muted block">f08e</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf08f;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-circle-up</span>
<span class="text-muted block">f08f</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf090;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-circle-left</span>
<span class="text-muted block">f090</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf091;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-circle-right</span>
<span class="text-muted block">f091</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf092;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-square-up</span>
<span class="text-muted block">f092</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf093;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-square-left</span>
<span class="text-muted block">f093</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf094;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-square-right</span>
<span class="text-muted block">f094</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf095;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-square-up</span>
<span class="text-muted block">f095</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf096;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-square-left</span>
<span class="text-muted block">f096</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf097;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-square-right</span>
<span class="text-muted block">f097</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf098;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-up</span>
<span class="text-muted block">f098</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf099;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-left</span>
<span class="text-muted block">f099</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf09a;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-right</span>
<span class="text-muted block">f09a</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf09b;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-up</span>
<span class="text-muted block">f09b</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf09c;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-left</span>
<span class="text-muted block">f09c</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf09d;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-right</span>
<span class="text-muted block">f09d</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf09e;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-up</span>
<span class="text-muted block">f09e</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf09f;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-left</span>
<span class="text-muted block">f09f</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0a0;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-caret-right</span>
<span class="text-muted block">f0a0</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0a1;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-up</span>
<span class="text-muted block">f0a1</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0a2;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-left</span>
<span class="text-muted block">f0a2</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0a3;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-chevron-right</span>
<span class="text-muted block">f0a3</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0a4;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-double-chevron-up</span>
<span class="text-muted block">f0a4</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0a5;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-double-chevron-left</span>
<span class="text-muted block">f0a5</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0a6;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-double-chevron-right</span>
<span class="text-muted block">f0a6</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0a7;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-long-arrow-up</span>
<span class="text-muted block">f0a7</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0a8;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-long-arrow-left</span>
<span class="text-muted block">f0a8</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0a9;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-long-arrow-right</span>
<span class="text-muted block">f0a9</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0aa;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-long-arrow-alt-up</span>
<span class="text-muted block">f0aa</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0ab;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-long-arrow-alt-left</span>
<span class="text-muted block">f0ab</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0ac;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-long-arrow-alt-right</span>
<span class="text-muted block">f0ac</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0ad;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-to-top</span>
<span class="text-muted block">f0ad</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0ae;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-to-left</span>
<span class="text-muted block">f0ae</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0af;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-to-right</span>
<span class="text-muted block">f0af</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0b0;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-to-top</span>
<span class="text-muted block">f0b0</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0b1;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-to-left</span>
<span class="text-muted block">f0b1</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0b2;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-to-right</span>
<span class="text-muted block">f0b2</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0b3;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-from-top</span>
<span class="text-muted block">f0b3</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0b4;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-from-left</span>
<span class="text-muted block">f0b4</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0b5;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-from-right</span>
<span class="text-muted block">f0b5</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0b6;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-from-top</span>
<span class="text-muted block">f0b6</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0b7;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-from-left</span>
<span class="text-muted block">f0b7</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0b8;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrow-alt-from-right</span>
<span class="text-muted block">f0b8</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0b9;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-angle-up</span>
<span class="text-muted block">f0b9</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0ba;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-angle-left</span>
<span class="text-muted block">f0ba</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0bb;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-angle-right</span>
<span class="text-muted block">f0bb</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0bc;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-double-angle-up</span>
<span class="text-muted block">f0bc</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0bd;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-double-angle-left</span>
<span class="text-muted block">f0bd</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0be;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-double-angle-right</span>
<span class="text-muted block">f0be</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0bf;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrows-h</span>
<span class="text-muted block">f0bf</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0c0;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-arrows-alt-h</span>
<span class="text-muted block">f0c0</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0c1;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-sticky-note</span>
<span class="text-muted block">f0c1</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0c2;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-inbox</span>
<span class="text-muted block">f0c2</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0c3;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-inbox-in</span>
<span class="text-muted block">f0c3</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0c4;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-inbox-out</span>
<span class="text-muted block">f0c4</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0c5;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-calendar</span>
<span class="text-muted block">f0c5</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0c6;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-calendar-alt</span>
<span class="text-muted block">f0c6</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0c7;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-calendar-exclamation</span>
<span class="text-muted block">f0c7</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0c8;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-calendar-check</span>
<span class="text-muted block">f0c8</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0c9;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-calendar-pen</span>
<span class="text-muted block">f0c9</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0ca;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-calendar-plus</span>
<span class="text-muted block">f0ca</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0cb;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-calendar-times</span>
<span class="text-muted block">f0cb</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0cc;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-calendar-minus</span>
<span class="text-muted block">f0cc</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0cd;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-file-plus</span>
<span class="text-muted block">f0cd</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0ce;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-file-times</span>
<span class="text-muted block">f0ce</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0cf;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-file-minus</span>
<span class="text-muted block">f0cf</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0d0;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-file-exclamation</span>
<span class="text-muted block">f0d0</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0d1;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-file-check</span>
<span class="text-muted block">f0d1</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0d2;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-file-pen</span>
<span class="text-muted block">f0d2</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0d3;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-usd</span>
<span class="text-muted block">f0d3</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0d4;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-usd-circle</span>
<span class="text-muted block">f0d4</span>
</div>
</li>
<li class="asset asset-icon">
<div class="icon-preview">
<i class="far far-lg">&#xf0d5;</i>
</div>
<div class="icon-label text-base">
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">far-usd-square</span>
<span class="text-muted block">f0d5</span>
</div>
</li>
</ul>
</section>
<section class="demo-typefaces m-xs-b-xl" id="demo-typefaces">
</section>
</div>
<div class="well br-t-0 bg-body p-xs-a-lg dashed dashed-top">
<section class="demo-meta m-xs-b-xl" id="demo-meta">
</section>
</div>
</div>
<footer class="footer-app m-xs-b-xl">
<div class="container">
<div class="row">
<div class="col-xs-6">
<p class="text-muted m-xs-b-0">
This is a demonstration of a kit made using <a target="_blank" href="https://fortawesome.com">Fort Awesome</a>, the place to pick from the best icon sets and typefaces and to manage and use them easily as part of your web projects.
</p>
</div>
<div class="col-xs-6 text-xs-right">
<a class="m-xs-r-md inline-block" target="_blank" href="https://fortawesome.com">Fort Awesome</a>
<a class="m-xs-r-md inline-block" target="_blank" href="https://fortawesome.com/help">Help</a>
<a class="inline-block" target="_blank" href="https://articles.fortawesome.com/tagged/fort-awesome">Articles &amp; How-To's</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>