@vcl/vcl/icogram/demo/example-horizontal.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">

<div class="icogram">
  <div class="text">Label only</div>
</div>

<br><br>

Multipe textual labels:<br>
<div class="icogram">
  <div class="text">Label 1</div>
  <div class="text">|</div>
  <div class="text">Label 2</div>
  <div class="text">|</div>
  <div class="text">Label 3</div>
</div>

<br><br>

Icon only:<br>
<div class="icogram">
  <div class="icon fas fa-user" aria-hidden="true" aria-label="account" role="img"></div>
</div>

<br><br>

<div class="icogram row justify-center">
  <div class="text">Centered label only</div>
</div>

<br><br>

Centered icon only:<br>
<div class="icogram row justify-center">
  <div class="icon fas fa-user" aria-hidden="true" aria-label="account" role="img"></div>
</div>

<br><br>

<div class="icogram">
  <div class="icon fas fa-user" aria-hidden="true" aria-label="account" role="img"></div>
  <div class="text">Prepended icon</div>
</div>

<br><br>

<div class="icogram">
  <div class="icon fas fa-user" aria-hidden="true" aria-label="account" role="img"></div>
  <div class="text">Prepended icon and appended badge</div> <div class="text badge rounded">11</div>
</div>

<br><br>

<div class="icogram">
  <div class="text">Appended icon</div>
  <div class="icon fas fa-user" aria-hidden="true" aria-label="account" role="img"></div>
</div>


<br><br>

<div class="icogram">
  <div class="text">Label before icon</div>
  <div class="icon fas fa-user" aria-hidden="true" aria-label="account" role="img"></div>
  <div class="text">Label after icon</div>
</div>

<br><br>

<div class="icogram row">
  <div class="text flex">Appended icon and flexed label</div>
  <div class="icon fas fa-user" aria-hidden="true" aria-label="account" role="img"></div>
</div>

<br><br>

<div class="icogram row">
  <div class="icon fas fa-user" aria-hidden="true" aria-label="account" role="img"></div>
  <div class="text flex align-centered">Prepended and appended icon with flexed label</div>
  <div class="icon fas fa-chevron-right" aria-hidden="false" aria-label="chevron-right" role="img"></div>
</div>

<br><br>

<a href="#" class="icogram">
  <div class="icon fas fa-link" aria-hidden="true" aria-label="account" role="img"></div>
  <div class="text">Link</div>
</a>

<br><br>

<div class="icogram scale180p">
  <div class="icon fas fa-user" aria-hidden="true" aria-label="account" role="img"></div>
  <div class="text">Enlarged label and icon</div>
</div>

<br><br>

<div class="icogram">
  <div class="icon fas fa-user fa-2x" aria-hidden="true" aria-label="account" role="img"></div>
  <div class="text">Enlarged prepended icon</div>
</div>

<br><br>

<div class="icogram">
  <div class="text">Image resource based icon</div>
  <div class="icon icon-size2" aria-label="cog" role="img">
    <div class="layout-fit" style="background-image: url('http://materialdesignicons.com/api/download/icon/png/E4A14909-3821-4DB1-A739-4DA464ABEEB7/36'); background-size: 100%; background-position: 50% 50%;"></div>
  </div>
</div>