thanthos/Font-Awesome-Pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

may 2 update - new icons, html docs, yaml spec

Browse Source
This commit is contained in:
Dave Gandy
2017-05-02 14:20:37 -04:00
parent e4d6cff662
commit e63ff47fcc
358 changed files with 8042 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

973
icons/regular/demo.html Executable file
View File

@@ -0,0 +1,973 @@
<!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>
</ul>
</section>
</div>
<div class="well br-t-0 bg-body p-xs-a-lg dashed dashed-top">
</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>