Icons8 web font sample

Icons8 web font sample.markdown

Icons8 web font sample

A Pen by Pavel Volyntsev on CodePen.

License.

index.html

<link rel="stylesheet" href="https://st.icons8.com/tmp-web-fonts/71/a0/7798a94b81c56ae8aa852e8b0671a06d6c373803/styles.css">

<div class="row">
  <div class="cell cell-icon">
    <i class="icons8-i"></i>
  </div>
  <div class="cell cell-title">
    icons8-i
  </div>
  <div class="cell cell-html">
    &lt;i class="<span class="html-attr-value">icons8-i</span>"&gt;&lt;/i&gt;
  </div>
</div>

<div class="row">
  <div class="cell cell-icon">
    <i class="icons8-icons8"></i>
  </div>
  <div class="cell cell-title">
    icons8-icons8
  </div>
  <div class="cell cell-html">
    &lt;i class="<span class="html-attr-value">icons8-icons8</span>"&gt;&lt;/i&gt;
  </div>
</div>

<div class="row">
  <div class="cell cell-icon">
    <i class="icons8-icons8-logo"></i>
  </div>
  <div class="cell cell-title">
    icons8-icons8-logo
  </div>
  <div class="cell cell-html">
    &lt;i class="<span class="html-attr-value">icons8-icons8-logo</span>"&gt;&lt;/i&gt;
  </div>
</div>

<div class="row">
  <div class="cell cell-icon">
    <i class="icons8-like-filled"></i>
  </div>
  <div class="cell cell-title">
    icons8-like-filled
  </div>
  <div class="cell cell-html">
    &lt;i class="<span class="html-attr-value">icons8-like-filled</span>"&gt;&lt;/i&gt;
  </div>
</div>

<div class="row">
  <div class="cell cell-icon">
    <i class="icons8-like-outlined"></i>
  </div>
  <div class="cell cell-title">
    icons8-like-outlined
  </div>
  <div class="cell cell-html">
    &lt;i class="<span class="html-attr-value">icons8-like-outlined</span>"&gt;&lt;/i&gt;
  </div>
</div>

style.css

body {
  font-size: 24px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 5px 20px;
}

.cell-icon {
  color: #32C24D;
  font-size: 24px;
}

.row:hover .cell-icon {
  color: #000;
}

.cell-title {
  color: #999;
}

.cell-html {
  font-family: monospace;
  font-size: 90%;
}

.html-attr-value {
  color: #77B38A;
}