CSS glyp

by koh_edwin

HTML

<div><i class="kpi-sym trend-up"></i>Trend up</div>
<div><i class="kpi-sym trend-same"></i>Trend same here</div>
<div><i class="kpi-sym trend-down"></i>Trend down</div>
<div><i class="kpi-sym performance-up"></i>Performance up</div>
<div><i class="kpi-sym performance-same"></i>Performance same</div>
<div><i class="kpi-sym performance-down"></i>Performance down</div>

CSS

.kpi-sym {
  box-sizing: border-box;
  display: inline-block;
  height: 32px;
  width: 40px;
  font-style: normal;
  font-weight: bold;
  font-size: 32px;
  text-align: center;
}

.trend-up::before { content:"↑"; }
.trend-same::before { content:"~"; }
.trend-down::before { content:"↓"; }
.performance-up::before { content:"▲"; }
.performance-same::before { content:"~"; }
.performance-down::before { content:"▼"; }