altinn-designsystem

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge">  <link rel="stylesheet" media="all" href="http://kit-download-assets.fortawesome.com/application.css">  <link href="css/external.css" rel="stylesheet">   </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> altinn.no </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"> <div class="alert alert-info bg-body m-xs-b-lg" role="alert"> <p class="m-xs-b-0">This demo is a live example of what your kit can do. Read up on how things are organized in <a href="README.md">your README</a>. See how anything is specifically working by <strong>viewing this page's source</strong>.</p> </div> <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="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-download</span> <span class="text-muted block">f008</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-arrowrightup</span> <span class="text-muted block">f009</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-money</span> <span class="text-muted block">f017</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-skatteetaten</span> <span class="text-muted block">f019</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-aordningen</span> <span class="text-muted block">f01a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-phone</span> <span class="text-muted block">f01b</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-sign</span> <span class="text-muted block">f01f</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-write</span> <span class="text-muted block">f020</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-read</span> <span class="text-muted block">f021</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-archive</span> <span class="text-muted block">f023</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-plus</span> <span class="text-muted block">f026</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-corp</span> <span class="text-muted block">f027</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-private</span> <span class="text-muted block">f028</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-others</span> <span class="text-muted block">f029</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-deadline</span> <span class="text-muted block">f02a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-tax</span> <span class="text-muted block">f02b</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-exit</span> <span class="text-muted block">f02c</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-search</span> <span class="text-muted block">f02d</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-back</span> <span class="text-muted block">f02e</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-expand</span> <span class="text-muted block">f030</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-undo</span> <span class="text-muted block">f031</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-openmessage</span> <span class="text-muted block">f032</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-closedmessage</span> <span class="text-muted block">f033</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-help</span> <span class="text-muted block">f034</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-edit</span> <span class="text-muted block">f035</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-document</span> <span class="text-muted block">f036</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-settings</span> <span class="text-muted block">f037</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-server</span> <span class="text-muted block">f039</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-info</span> <span class="text-muted block">f03a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-arrowright</span> <span class="text-muted block">f03d</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-keyhole</span> <span class="text-muted block">f03e</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-expand-circle</span> <span class="text-muted block">f03f</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circle-exit</span> <span class="text-muted block">f040</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-upload</span> <span class="text-muted block">f041</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-help-popicon</span> <span class="text-muted block">f042</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-check</span> <span class="text-muted block">f043</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circle-plus</span> <span class="text-muted block">f046</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circle-minus</span> <span class="text-muted block">f047</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-facebook</span> <span class="text-muted block">f049</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-twitter</span> <span class="text-muted block">f04a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-linkedin</span> <span class="text-muted block">f04b</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-date</span> <span class="text-muted block">f04c</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-send</span> <span class="text-muted block">f04d</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-info-circle</span> <span class="text-muted block">f04f</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-check-circle</span> <span class="text-muted block">f052</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-attachment</span> <span class="text-muted block">f053</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-forward</span> <span class="text-muted block">f054</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-trash</span> <span class="text-muted block">f055</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circle-exclamation</span> <span class="text-muted block">f056</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-family</span> <span class="text-muted block">f057</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-more</span> <span class="text-muted block">f058</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-archive-alt</span> <span class="text-muted block">f059</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-print</span> <span class="text-muted block">f05a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-client</span> <span class="text-muted block">f05b</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-a</span> <span class="text-muted block">f05d</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-b</span> <span class="text-muted block">f05e</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-c</span> <span class="text-muted block">f05f</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-d</span> <span class="text-muted block">f060</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-e</span> <span class="text-muted block">f061</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-f</span> <span class="text-muted block">f062</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-g</span> <span class="text-muted block">f063</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-h</span> <span class="text-muted block">f064</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-i</span> <span class="text-muted block">f065</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-j</span> <span class="text-muted block">f066</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-k</span> <span class="text-muted block">f067</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-u</span> <span class="text-muted block">f068</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-v</span> <span class="text-muted block">f069</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-w</span> <span class="text-muted block">f06a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-x</span> <span class="text-muted block">f06b</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-y</span> <span class="text-muted block">f06c</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-l</span> <span class="text-muted block">f06d</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-m</span> <span class="text-muted block">f06e</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-n</span> <span class="text-muted block">f06f</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-o</span> <span class="text-muted block">f070</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-p</span> <span class="text-muted block">f071</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-q</span> <span class="text-muted block">f072</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-r</span> <span class="text-muted block">f073</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-s</span> <span class="text-muted block">f074</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-t</span> <span class="text-muted block">f075</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-z</span> <span class="text-muted block">f076</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-ae</span> <span class="text-muted block">f077</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-oo</span> <span class="text-muted block">f078</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-aa</span> <span class="text-muted block">f079</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-keyhole-circle</span> <span class="text-muted block">f07a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-private-circle-big</span> <span class="text-muted block">f07b</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-plain-circle</span> <span class="text-muted block">f07d</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-plain-circle-big</span> <span class="text-muted block">f07e</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-corp-circle-big</span> <span class="text-muted block">f07f</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-lock-open</span> <span class="text-muted block">f080</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-locked</span> <span class="text-muted block">f081</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-plain-circle-test</span> <span class="text-muted block">f082</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-exit-test</span> <span class="text-muted block">f083</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="ai ai-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-stop</span> <span class="text-muted block">f084</span> </div> </li> </ul> <h3 class="text-lg m-xs-b-md">Using your icons on the web</h3> <div class="row m-xs-b-lg"> <div class="col-xs-9"> <p>You can place your Fort Awesome icons just about anywhere using your CSS kit prefix<codeai</code> and the icon's name. Fort Awesome icons are designed to be used with inline elements (we like the <code><i></code> tag, but you can use ><code><span></code> too).</p> <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm"> <span class="text-sm font-weight-bold">Example</span> </div> <pre class="bg-gray-dark inset-darkest br-b p-xs-a-md br-t-0"><code class="html"><span class="nt"><i</span><span class="na"> class=</span><span class="s">"ai ai-archive-alt"</span><span class="nt">></i></span></code></pre> <div class="alert alert-info bg-body m-xs-b-0"> <p class="m-xs-b-0">If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else you can imagine with CSS.</p> </div> </div> <div class="col-xs-3"> <p class="m-xs-b-0 text-sm m-xs-t-2x">Still need help getting started? Check out <a target="_blank" href="https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a">our how-to article on using icons</a>.</p> </div> </div> <h3 class="text-lg m-xs-b-md">Icon Styling Support</h3> <div class="row m-xs-b-lg"> <div class="col-xs-3 col-xs-push-9"> <h4 class="m-xs-b-0 text-muted text-base">Larger Icons</h4> </div> <div class="col-xs-9 col-xs-pull-3"> <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm"> <span class="text-sm font-weight-bold">Example</span> </div> <div class="well bg-body text-sm br-t-0 m-xs-b-0"> <p> <i class="ai ai-archive-alt ai-lg"></i> ai-lg </p> <p> <i class="ai ai-archive-alt ai-2x"></i> ai-2x </p> <p> <i class="ai ai-archive-alt ai-3x"></i> ai-3x </p> <p> <i class="ai ai-archive-alt ai-4x"></i> ai-4x </p> <p> <i class="ai ai-archive-alt ai-5x"></i> ai-5x </p> </div> </div> </div> <div class="row m-xs-b-lg"> <div class="col-xs-3 col-xs-push-9"> <h4 class="m-xs-b-0 text-muted text-base">Fixed Width Icons</h4> </div> <div class="col-xs-9 col-xs-pull-3"> <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm"> <span class="text-sm font-weight-bold">Example</span> </div> <div class="well bg-body text-sm br-t-0 m-xs-b-0"> <div class="list-group m-xs-b-0"> <a class="list-group-item" href="#"> <i class="ai ai-archive-alt ai-fw"></i>   Home </a> <a class="list-group-item" href="#"> <i class="ai ai-archive-alt ai-fw"></i>   Library </a> <a class="list-group-item" href="#"> <i class="ai ai-archive-alt ai-fw"></i>   Applications </a> <a class="list-group-item" href="#"> <i class="ai ai-archive-alt ai-fw"></i>   Settings </a> </div> </div> </div> </div> <div class="row m-xs-b-lg"> <div class="col-xs-3 col-xs-push-9"> <h4 class="m-xs-b-0 text-muted text-base">List Icons</h4> </div> <div class="col-xs-9 col-xs-pull-3"> <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm"> <span class="text-sm font-weight-bold">Example</span> </div> <div class="well bg-body text-sm br-t-0 m-xs-b-0"> <ul class="ai-ul m-xs-b-0"> <li> <i class="ai-li ai ai-archive-alt"></i> List icons </li> <li> <i class="ai-li ai ai-archive-alt"></i> can be used </li> <li> <i class="ai-li ai ai-archive-alt ai-spin"></i> as bullets </li> <li> <i class="ai-li ai ai-archive-alt"></i> in lists </li> </ul> </div> </div> </div> <div class="row m-xs-b-lg"> <div class="col-xs-3 col-xs-push-9"> <h4 class="m-xs-b-0 text-muted text-base">Bordered & Pulled Icons</h4> </div> <div class="col-xs-9 col-xs-pull-3"> <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm"> <span class="text-sm font-weight-bold">Example</span> </div> <div class="well bg-body text-sm br-t-0 m-xs-b-0"> <i class="ai ai-archive-alt ai-3x pull-left ai-border"></i> Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter—tomorrow we will run [kit_prefix]ster, stretch out our arms [kit_prefix]rther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past. </div> </div> </div> <div class="row m-xs-b-lg"> <div class="col-xs-3 col-xs-push-9"> <h4 class="m-xs-b-0 text-muted text-base">Animated Icons</h4> <p> <strong>Note:</strong> We like using these animated classes with things like <a href="https://fortawesome.com/sets?q=spinner">spinners</a>, <a href="https://fortawesome.com/sets?q=gear">gears</a>, and <a href="https://fortawesome.com/sets?q=load">loaders</a>. </p> </div> <div class="col-xs-9 col-xs-pull-3"> <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm"> <span class="text-sm font-weight-bold">Example</span> </div> <div class="well bg-body text-sm br-t-0 m-xs-b-0"> <button class="btn btn-secondary btn-lg"> <i class="ai ai-archive-al