973 lines
40 KiB
HTML
Executable File
973 lines
40 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="0cb6f571-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 Light
|
|
</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="fal fal-lg">📕</i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-book</span>
|
|
<span class="text-muted block">1F4D5</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg">✉</i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-envelope</span>
|
|
<span class="text-muted block">2709</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-times-circle</span>
|
|
<span class="text-muted block">f002</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-plus-circle</span>
|
|
<span class="text-muted block">f003</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-exclamation-triangle</span>
|
|
<span class="text-muted block">f004</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-pen</span>
|
|
<span class="text-muted block">f005</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-pen-alt</span>
|
|
<span class="text-muted block">f006</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-pen-square</span>
|
|
<span class="text-muted block">f007</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-trash-alt</span>
|
|
<span class="text-muted block">f00a</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-trash2</span>
|
|
<span class="text-muted block">f00b</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-rocket</span>
|
|
<span class="text-muted block">f00c</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-trophy-alt</span>
|
|
<span class="text-muted block">f00d</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-trophy</span>
|
|
<span class="text-muted block">f00e</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-coffee</span>
|
|
<span class="text-muted block">f00f</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-paint-brush</span>
|
|
<span class="text-muted block">f010</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-poo</span>
|
|
<span class="text-muted block">f011</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-paper-plane</span>
|
|
<span class="text-muted block">f012</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-smile</span>
|
|
<span class="text-muted block">f013</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-bomb</span>
|
|
<span class="text-muted block">f014</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-thumbs-up</span>
|
|
<span class="text-muted block">f015</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-thumbs-down</span>
|
|
<span class="text-muted block">f016</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-star-exclamation</span>
|
|
<span class="text-muted block">f018</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-star</span>
|
|
<span class="text-muted block">f019</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-camera-retro</span>
|
|
<span class="text-muted block">f01a</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-camera-alt</span>
|
|
<span class="text-muted block">f01b</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg">📷</i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-camera</span>
|
|
<span class="text-muted block">1F4F7</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-bullhorn</span>
|
|
<span class="text-muted block">f01d</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-lock-alt</span>
|
|
<span class="text-muted block">f01e</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-lock</span>
|
|
<span class="text-muted block">f01f</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-file-alt</span>
|
|
<span class="text-muted block">f020</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-file</span>
|
|
<span class="text-muted block">f021</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-leaf</span>
|
|
<span class="text-muted block">f022</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-flask</span>
|
|
<span class="text-muted block">f023</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-comment-alt</span>
|
|
<span class="text-muted block">f024</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-comment</span>
|
|
<span class="text-muted block">f025</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-code</span>
|
|
<span class="text-muted block">f026</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-edit</span>
|
|
<span class="text-muted block">f027</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-gamepad</span>
|
|
<span class="text-muted block">f028</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-print</span>
|
|
<span class="text-muted block">f029</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-bars</span>
|
|
<span class="text-muted block">f02a</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-home</span>
|
|
<span class="text-muted block">f02b</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-magic</span>
|
|
<span class="text-muted block">f02c</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-jack-o-lantern</span>
|
|
<span class="text-muted block">f02d</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-pencil</span>
|
|
<span class="text-muted block">f02e</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-pencil-alt</span>
|
|
<span class="text-muted block">f02f</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-search</span>
|
|
<span class="text-muted block">f030</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-search-minus</span>
|
|
<span class="text-muted block">f031</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-search-plus</span>
|
|
<span class="text-muted block">f032</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-martini-glass</span>
|
|
<span class="text-muted block">f033</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-music</span>
|
|
<span class="text-muted block">f034</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-user</span>
|
|
<span class="text-muted block">f035</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-film</span>
|
|
<span class="text-muted block">f036</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-th</span>
|
|
<span class="text-muted block">f037</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-th-large</span>
|
|
<span class="text-muted block">f038</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-th-list</span>
|
|
<span class="text-muted block">f039</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-utensils</span>
|
|
<span class="text-muted block">f03a</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-utensil-fork</span>
|
|
<span class="text-muted block">f03b</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-utensil-knife</span>
|
|
<span class="text-muted block">f03c</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-utensil-spoon</span>
|
|
<span class="text-muted block">f03d</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-utensils-alt</span>
|
|
<span class="text-muted block">f03e</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-check</span>
|
|
<span class="text-muted block">f03f</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-check-square</span>
|
|
<span class="text-muted block">f040</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-check-circle</span>
|
|
<span class="text-muted block">f041</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-times</span>
|
|
<span class="text-muted block">f042</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-times-square</span>
|
|
<span class="text-muted block">f043</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-plus</span>
|
|
<span class="text-muted block">f044</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-plus-square</span>
|
|
<span class="text-muted block">f045</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-minus</span>
|
|
<span class="text-muted block">f046</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-minus-square</span>
|
|
<span class="text-muted block">f047</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-minus-circle</span>
|
|
<span class="text-muted block">f048</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-heart</span>
|
|
<span class="text-muted block">f049</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-diamond</span>
|
|
<span class="text-muted block">f04a</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-spade</span>
|
|
<span class="text-muted block">f04b</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-club</span>
|
|
<span class="text-muted block">f04c</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-square</span>
|
|
<span class="text-muted block">f04d</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-circle</span>
|
|
<span class="text-muted block">f04e</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-octagon</span>
|
|
<span class="text-muted block">f04f</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-hexagon</span>
|
|
<span class="text-muted block">f050</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-triangle</span>
|
|
<span class="text-muted block">f051</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-shield</span>
|
|
<span class="text-muted block">f052</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-badge</span>
|
|
<span class="text-muted block">f053</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-shield-check</span>
|
|
<span class="text-muted block">f054</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-badge-check</span>
|
|
<span class="text-muted block">f055</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-times-octagon</span>
|
|
<span class="text-muted block">f056</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-times-hexagon</span>
|
|
<span class="text-muted block">f057</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-plus-octagon</span>
|
|
<span class="text-muted block">f058</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-plus-hexagon</span>
|
|
<span class="text-muted block">f059</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-minus-octagon</span>
|
|
<span class="text-muted block">f05a</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="asset asset-icon">
|
|
<div class="icon-preview">
|
|
<i class="fal fal-lg"></i>
|
|
</div>
|
|
<div class="icon-label text-base">
|
|
<span class="text-gray-darker font-weight-semibold block m-xs-b-xs">fal-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 & 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>
|