Icons
Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit. For this theme we used FontAwesome v5.6.3 and some custom icons
Font Awesome Icon Examples
<i class="fa fas-telegram"></i>
<i class="fa fa-telegram fa-2x"></i>
<i class="fa fa-telegram fa-3x"></i>
<i class="fa fa-telegram fa-x"></i>
SpaceMax Icon Examples
<span class="icon--2x">
<i class="icon icon-logo-facebook"></i>
</span>
<span class="icon--3x">
<i class="icon icon-logo-flickr"></i>
</span>
<span class="icon--4x">
<i class="icon icon-logo-medium"></i>
</span>
Icon Options
Square Icons
<span class="icon--lg bg-color--primary color--white mx-1">
<i class="icon icon-key"></i>
</span>
<!-- End of Not Rounded Icon-->
<span class="icon--lg bg-color--primary color--white rounded--10 mx-1">
<i class="icon icon-key"></i>
</span>
<!-- End of Semi Rounded Icon -->
<span class="icon--lg bg-color--primary color--white rounded-circle mx-1">
<i class="icon icon-key"></i>
</span>
<!-- End of Cirlce Icon -->
Wide Icons
<div class="icon-fill--wide text-center d-lg-flex justify-content-lg-center flex-wrap">
<a class="t-icon box-shadow--5 rounded--05 m-1 btn-hover--primary" href="#">
<span class="t-icon__brand-icon h4-font text-color--400"><i class="fab fa-telegram-plane"></i></span>
<span class="t-icon__brand-name h5-font font-w--500 text-color--700">telegram</span>
</a>
<a class="t-icon box-shadow--5 rounded--05 m-1 btn-hover--primary" href="#">
<span class="t-icon__brand-icon h4-font color--primary"><i class="fab fa-reddit-alien"></i></span>
<span class="t-icon__brand-name h5-font font-w--500 color--primary">subreddit</span>
</a>
</div>
<!-- end of icon group -->
Group Icons
<div class="icon-group">
<a href="#" class="color--primary"><i class="fab fa-medium-m"></i></a>
<a href="#" class="color--primary"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="color--primary"><i class="fab fa-twitter"></i></a>
<a href="#" class="color--primary"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="color--primary"><i class="fab fa-telegram-plane"></i></a>
<a href="#" class="color--primary"><i class="fab fa-youtube"></i></a>
<a href="#" class="color--primary"><i class="fab fa-pinterest"></i></a>
</div>
Group Icons vertical
<ul class="icon-group icon-group--vertical rounded--full justify-content-center mb-3 mb-md-10">
<li><a href="#" class="color--primary"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="color--primary"><i class="fab fa-telegram-plane"></i></a></li>
<li><a href="#" class="color--primary"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" class="color--primary"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="color--primary"><i class="fab fa-medium-m"></i></a></li>
<li><a href="#" class="color--primary"><i class="fab fa-bitcoin"></i></a></li>
<li><a href="#" class="color--primary"><i class="fab fa-youtube"></i></a></li>
</ul>
<!-- end of icon group -->
Icon Sizes
Fill Icon Sizes
<span class="icon--sm bg-color--white rounded--full color--primary box-shadow--4 mx-1">
<i class="icon icon-key"></i>
</span>
<!-- End of Small Size Icon-->
<span class="icon--md bg-color--white rounded--full color--primary box-shadow--4 mx-1">
<i class="icon icon-key"></i>
</span>
<!-- End of Medium Size Icon-->
<span class="icon--lg bg-color--white rounded--full color--primary box-shadow--4 mx-1">
<i class="icon icon-key"></i>
</span>
<!-- End of Large Size Icon-->
<span class="icon--xl bg-color--white rounded--full color--primary box-shadow--4 mx-1">
<i class="icon icon-key"></i>
</span>
<!-- End of Extra Large Size Icon-->
Transparent Icon Sizes
<span class="color--white">
<i class="icon icon-key"></i>
</span>
<!-- End of Icon 1x -->
<span class="icon--2x color--white">
<i class="icon icon-key"></i>
</span>
<!-- End of Icon 2x -->
<span class="icon--3x color--white">
<i class="icon icon-key"></i>
</span>
<!-- End of Icon 3x -->
<span class="icon--4x color--white">
<i class="icon icon-key"></i>
</span>
<!-- End of Icon 4x -->
<span class="icon--5x color--white">
<i class="icon icon-key"></i>
</span>
<!-- End of Icon 5x -->
<span class="icon--6x color--white">
<i class="icon icon-key"></i>
</span>
<!-- End of Icon 6x -->
<span class="icon--7x color--white">
<i class="icon icon-key"></i>
</span>
<!-- End of Icon 7x -->
<span class="icon--8x color--white">
<i class="icon icon-key"></i>
</span>
<!-- End of Icon 8x -->
<span class="icon--9x color--white">
<i class="icon icon-key"></i>
</span>
<!-- End of Icon 9x -->
<span class="icon--10x color--white">
<i class="icon icon-key"></i>
</span>
<!-- End of Icon 10x -->