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-reg.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="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-corp</span> <span class="text-muted block">f000</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-private</span> <span class="text-muted block">f001</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-other</span> <span class="text-muted block">f002</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-phone</span> <span class="text-muted block">f003</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-deadline</span> <span class="text-muted block">f004</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-tax</span> <span class="text-muted block">f005</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-trash</span> <span class="text-muted block">f006</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-forward</span> <span class="text-muted block">f007</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-family</span> <span class="text-muted block">f008</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-attachment</span> <span class="text-muted block">f009</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-exit</span> <span class="text-muted block">f00a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-search</span> <span class="text-muted block">f00b</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-back</span> <span class="text-muted block">f00c</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-plus</span> <span class="text-muted block">f00d</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-expand</span> <span class="text-muted block">f00e</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-undo</span> <span class="text-muted block">f00f</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-more</span> <span class="text-muted block">f010</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-write</span> <span class="text-muted block">f011</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-sign</span> <span class="text-muted block">f012</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-edit</span> <span class="text-muted block">f013</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-openmessage</span> <span class="text-muted block">f014</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-closedmessage</span> <span class="text-muted block">f015</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-rightup</span> <span class="text-muted block">f016</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-download</span> <span class="text-muted block">f017</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-money</span> <span class="text-muted block">f018</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-help</span> <span class="text-muted block">f019</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-date</span> <span class="text-muted block">f01a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-linkedin</span> <span class="text-muted block">f01b</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-twitter</span> <span class="text-muted block">f01c</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-facebook</span> <span class="text-muted block">f01d</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-read</span> <span class="text-muted block">f01e</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-archive</span> <span class="text-muted block">f01f</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-server</span> <span class="text-muted block">f020</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-info</span> <span class="text-muted block">f021</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-archive-alt</span> <span class="text-muted block">f022</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-print</span> <span class="text-muted block">f023</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-check</span> <span class="text-muted block">f024</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-upload</span> <span class="text-muted block">f025</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-settings</span> <span class="text-muted block">f026</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-document</span> <span class="text-muted block">f027</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-client</span> <span class="text-muted block">f028</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-send</span> <span class="text-muted block">f029</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-next</span> <span class="text-muted block">f02a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-keyhole</span> <span class="text-muted block">f02b</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-exit</span> <span class="text-muted block">f02c</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-exclamation</span> <span class="text-muted block">f02d</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-info</span> <span class="text-muted block">f02e</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-popicon</span> <span class="text-muted block">f02f</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-plus</span> <span class="text-muted block">f030</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-minus</span> <span class="text-muted block">f031</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-big-exit</span> <span class="text-muted block">f032</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-big-exclamation</span> <span class="text-muted block">f033</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-big-info</span> <span class="text-muted block">f034</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-big-keyhole</span> <span class="text-muted block">f035</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-big-corp</span> <span class="text-muted block">f036</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-big-private</span> <span class="text-muted block">f037</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-big-popicon</span> <span class="text-muted block">f038</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-big-minus</span> <span class="text-muted block">f039</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-circle-big-expand</span> <span class="text-muted block">f03a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-attachment-pdf</span> <span class="text-muted block">f03c</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-attachment-csv</span> <span class="text-muted block">f03d</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-attachment-ods</span> <span class="text-muted block">f03e</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-attachment-xml</span> <span class="text-muted block">f03f</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-log</span> <span class="text-muted block">f040</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-forward-msg</span> <span class="text-muted block">f041</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-lock</span> <span class="text-muted block">f042</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-save</span> <span class="text-muted block">f043</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-lock-open</span> <span class="text-muted block">f044</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-edit-form</span> <span class="text-muted block">f045</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-attachedform</span> <span class="text-muted block">f046</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-openfolder</span> <span class="text-muted block">f047</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-closedfolder</span> <span class="text-muted block">f048</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-delete</span> <span class="text-muted block">f049</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-digi-post</span> <span class="text-muted block">f04a</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-fwd-file</span> <span class="text-muted block">f04b</span> </div> </li> <li class="asset asset-icon"> <div class="icon-preview"> <i class="reg reg-lg"></i> </div> <div class="icon-label text-base"> <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">reg-e-boks</span> <span class="text-muted block">f04c</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<codereg</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">"reg reg-edit-form"</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="reg reg-edit-form reg-lg"></i> reg-lg </p> <p> <i class="reg reg-edit-form reg-2x"></i> reg-2x </p> <p> <i class="reg reg-edit-form reg-3x"></i> reg-3x </p> <p> <i class="reg reg-edit-form reg-4x"></i> reg-4x </p> <p> <i class="reg reg-edit-form reg-5x"></i> reg-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="reg reg-edit-form reg-fw"></i>   Home </a> <a class="list-group-item" href="#"> <i class="reg reg-edit-form reg-fw"></i>   Library </a> <a class="list-group-item" href="#"> <i class="reg reg-edit-form reg-fw"></i>   Applications </a> <a class="list-group-item" href="#"> <i class="reg reg-edit-form reg-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="reg-ul m-xs-b-0"> <li> <i class="reg-li reg reg-edit-form"></i> List icons </li> <li> <i class="reg-li reg reg-edit-form"></i> can be used </li> <li> <i class="reg-li reg reg-edit-form reg-spin"></i> as bullets </li> <li> <i class="reg-li reg reg-edit-form"></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="reg reg-edit-form reg-3x pull-left reg-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="reg reg-edit-form reg-spin"></i> </button> <button class="btn btn-secondary btn-lg"> <i class="reg reg-edit-form reg-spin"></i> </button> </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">Rotated & Flipped</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> <i class="reg reg-edit-form"></i>  normal<br> <i class="reg reg-edit-form reg-rotate-90"></i>  fa-rotate-90<br> <i class="reg reg-edit-form reg-rotate-180"></i>  fa-rotate-180<br> <i class="reg reg-edit-form reg-rotate-270"></i>  fa-rotate-270<br> <i class="reg reg-edit-form reg-flip-horizontal"></i>  fa-flip-horizontal<br> <i class="reg reg-edit-form reg-flip-vertical"></i>  fa-flip-vertical </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">Stacked 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"> <span class="reg-stack reg-lg"> <i class="reg reg-edit-form reg-stack-2x"></i> <i class="reg reg-edit-form reg-stack-1x"></i> </span> </div> </div> </div> </section> <section class="demo-typefaces m-xs-b-xl" id="demo-typefaces"> <h2 class="text-xl m-xs-b-0">Your Typefaces</h2> <hr class="hr-lg m-xs-y-md"> <div class="well bg-primary bg-img bg-img-icons p-xs-a-2x m-xs-b-lg text-xs-center"> <h2 class="text-2x">This Kit Doesn't Have Any Typefaces</h2> <p class="lead m-xs-b-0 text-muted">Hey. It looks like you don't have any typefaces currently in this kit. Its pretty easy to <a href="https://fortawesome.com/kits/df832575/typefaces/new" class="text-white">add some</a> or even <a href="https://fortawesome.com/typefaces/df832575/icons/upload" class="text-white">upload your own</a>.</p> </div> </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"> <div class="row"> <div class="col-xs-4 p-xs-x-md"> <h2 class="text-base text-muted">Bits About This Kit</h2> <hr class="m-xs-y-sm"> <div class="gg gg-middle m-xs-b-md"> <div class="gg-row"> <div class="gg-col p-xs-y-xs p-xs-r-md"> <span class="text-muted">Kit Name:</span> </div> <div class="gg-col p-xs-y-xs"> altinn-reg.no </div> </div> <div class="gg-row"> <div class="gg-col p-xs-y-xs p-xs-r-md"> <span class="text-muted">Kit ID:</span> </div> <div class="gg-col p-xs-y-xs"> df832575 </div> </div> <div class="gg-row"> <div class="gg-col p-xs-y-xs p-xs-r-md"> <span class="text-muted">Icon Prefix:</span> </div> <div class="gg-col p-xs-y-xs"> reg </div> </div> <div class="gg-row"> <div class="gg-col p-xs-y-xs p-xs-r-md"> <span class="text-muted">Icons:</span> </div> <div class="gg-col p-xs-y-xs"> 76 </div> </div> <div class="gg-row"> <div class="gg-col p-xs-y-xs p-xs-r-md"> <span class="text-muted">Typefaces:</span> </div> <div class="gg-col p-xs-y-xs"> 0 <a class="m-xs-l-sm text-sm" href="https://fortawesome.com/kits/df832575/typefaces/new">Add some <span class="sr-only">typefaces</span></a> </div> </div> </div> </div> <div class="col-xs-4 p-xs-x-md"> <h2 class="text-base text-muted">Documentation & Support</h2> <hr class="m-xs-y-sm"> <p> This kit has extensive documentation for use on the web and on the desktop. Check out <a class="word-wrap" href="https://fortawesome.com/share/eyJhbGciOiJIUzI1NiJ9.eyJraXQiOiJkZjgzMjU3NSJ9.tCAJksiA71xOvI8xCwI9uMbf72-E_25w9_9V3oag7X0/kit-documentation">https://fortawesome.com/share/eyJhbGciOiJIUzI1NiJ9.eyJraXQiOiJkZjgzMjU3NSJ9.tCAJksiA71xOvI8xCwI9uMbf72-E_25w9_9V3oag7X0/kit-documentation</a>. </p> <p> Need an example or walkthrough? Check out our Fort Awesome how-to guides on <a href="https://articles.fortawesome.com/how-to-fort-awesome-assets-on-the-desktop-e3fd15df6f43">desktop use</a>, <a href="https://articles.fortawesome.com/how-to-serve-fort-awesome-assets-yourself-5419b88ee2d4">serving things yourself</a>, and <a href="https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a">basic icon use</a>. </p> </div> <div class="col-xs-4 p-xs-x-md"> <h2 class="text-base text-muted">View & Edit this Kit</h2> <hr class="m-xs-y-sm"> <p> This demo page look out of date or is it missing something? You can edit assets, names, and settings on Fort Awesome. </p> <a class="btn btn-primary-outline block m-xs-b-sm" href="https://fortawesome.com/kits/df832575">View & Edit on Fort Awesome</a>