This way we don’t need to generate the font file.
CSS:
.tab-icon-home { display: inline-block; mask: url('../img/tab/icon_home.svg') no-repeat center; -webkit-mask: url('../img/tab/icon_home.svg') no-repeat center; mask-size: 32px; -webkit-mask-size: 32px; background-color: #929292; } .tab-active i { background-color: #03A9F4; } a.tab-active { color: #03A9F4; }
HTML:
<a class="tab-item" href="https://www.blogger.com/null" ui-sref-active="tab-active" ui-sref="home"> <i class="icon tab-icon-home"></i> Home </a>