Responsive Grid Navigation Icons
Responsive Grid Source Code
<div class="col12" style="text-align: center;">
<div class="col3" style="background-color: #fdb827; color: #002d74; padding: 25px;"><i class="fas fa-folder-open fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><span style="text-decoration: underline;"> <strong><a href="#" style="color: #002d74; text-decoration: underline;">Option 1</a></strong></span></h3>
</div>
<div class="col3" style="background-color: #fdb827; color: #002d74; padding: 25px;"><i class="fas fa-users fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><span style="text-decoration: underline;"><a href="#" style="color: #002d74;"><strong>Option 2</strong></a></span></h3>
</div>
<div class="col3" style="background-color: #fdb827; color: #002d74; padding: 25px;"><i class="fas fa-calendar-check fa-fw fa-7x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><span style="text-decoration: underline;"><a href="#" style="color: #002d74;"><strong>Option 3</strong></a></span></h3>
</div>
<div class="col3" style="background-color: #fdb827; color: #002d74; padding: 25px;"><i class="fas fa-info-circle fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><span style="text-decoration: underline;"><a href="#" style="color: #002d74;"><strong>Option 4</strong></a></span></h3>
</div>
</div>
<p> </p>
<div class="col12" style="text-align: center;">
<div class="col3" style="background-color: #002d74; border-radius: 20px 20px 20px 20px; color: #fdb827; padding: 25px;"><i class="fas fa-phone fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><strong><a href="#" style="color: #fdb827;">Option 1</a></strong></h3>
</div>
<div class="col3" style="background-color: #002d74; border-radius: 20px 20px 20px 20px; color: #fdb827; padding: 25px;"><i class="fas fa-user fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="yellow"><a href="#" style="color: #fdb827;"><strong>Option 2</strong></a></h3>
</div>
<div class="col3" style="background-color: #002d74; border-radius: 20px 20px 20px 20px; color: #fdb827; padding: 25px;"><i class="fas fa-search fa-fw fa-7x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #fdb827;"><strong>Option 3</strong></a></h3>
</div>
<div class="col3" style="background-color: #002d74; border-radius: 20px 20px 20px 20px; color: #fdb827; padding: 25px;"><i class="fas fa-shield-alt fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="yellow"><a href="#" style="color: #fdb827;"><strong>Option 4</strong></a></h3>
</div>
</div>
<p> </p>
<div class="col12" style="text-align: center;">
<div class="col3" style="background-color: #e8e8e8; border-radius: 5px 20px 5px; color: #002d74; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-file fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><strong><a href="#" style="color: #002d74;">Option 1</a></strong></h3>
</div>
<div class="col3" style="background-color: #e8e8e8; border-radius: 5px 20px 5px; color: #fdb827; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-user-graduate fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="yellow"><a href="#" style="color: #fdb827;"><strong>Option 2</strong></a></h3>
</div>
<div class="col3" style="background-color: #e8e8e8; border-radius: 5px 20px 5px; color: #002d74; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-th-list fa-fw fa-7x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #002d74;"><strong>Option 3</strong></a></h3>
</div>
<div class="col3" style="background-color: #e8e8e8; border-radius: 5px 20px 5px; color: #fdb827; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-check fa-fw fa-7x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #fdb827;"><strong>Option 4</strong></a></h3>
</div>
</div>
<p> <a href="#" style="color: #002d74;"></a></p>
<div class="col12" style="text-align: center;">
<div class="col2" style="background-color: #e8e8e8; border-radius: 20px 20px 0px 0px; color: #002d74; box-shadow: 7px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-file fa-3x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><strong><a href="#" style="color: #002d74;">Option 1</a></strong></h3>
</div>
<div class="col2" style="background-color: #002d74; border-radius: 20px 20px 0px 0px; color: #fdb827; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-link fa-3x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="yellow"><a href="#" style="color: #fdb827;"><strong>Option 2</strong></a></h3>
</div>
<div class="col2" style="background-color: #002d74; border-radius: 20px 20px 0px 0px; color: #ffffff; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-star fa-fw fa-3x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #ffffff;"><strong>Option 3</strong></a></h3>
</div>
<div class="col2" style="background-color: #e8e8e8; border-radius: 20px 20px 0px 0px; color: #fdb827; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-envelope fa-fw fa-3x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #fdb827;"><strong>Option 4</strong></a></h3>
</div>
<div class="col2" style="background-color: #ffffff; border: 1px solid #e8e8e8; border-radius: 20px 20px 0px 0px; color: #002d74; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-user-circle fa-fw fa-3x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #002d74;"><strong>Option 5</strong></a></h3>
</div>
<div class="col2" style="background-color: #fdb827; outline-style: outset; border: 1px solid #fdb827; border-radius: 20px 20px 0px 0px; color: #ffffff; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-comment fa-fw fa-3x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #ffffff;"><strong>Option 6</strong></a></h3>
</div>
</div>
<div class="col3" style="background-color: #fdb827; color: #002d74; padding: 25px;"><i class="fas fa-folder-open fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><span style="text-decoration: underline;"> <strong><a href="#" style="color: #002d74; text-decoration: underline;">Option 1</a></strong></span></h3>
</div>
<div class="col3" style="background-color: #fdb827; color: #002d74; padding: 25px;"><i class="fas fa-users fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><span style="text-decoration: underline;"><a href="#" style="color: #002d74;"><strong>Option 2</strong></a></span></h3>
</div>
<div class="col3" style="background-color: #fdb827; color: #002d74; padding: 25px;"><i class="fas fa-calendar-check fa-fw fa-7x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><span style="text-decoration: underline;"><a href="#" style="color: #002d74;"><strong>Option 3</strong></a></span></h3>
</div>
<div class="col3" style="background-color: #fdb827; color: #002d74; padding: 25px;"><i class="fas fa-info-circle fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><span style="text-decoration: underline;"><a href="#" style="color: #002d74;"><strong>Option 4</strong></a></span></h3>
</div>
</div>
<p> </p>
<div class="col12" style="text-align: center;">
<div class="col3" style="background-color: #002d74; border-radius: 20px 20px 20px 20px; color: #fdb827; padding: 25px;"><i class="fas fa-phone fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><strong><a href="#" style="color: #fdb827;">Option 1</a></strong></h3>
</div>
<div class="col3" style="background-color: #002d74; border-radius: 20px 20px 20px 20px; color: #fdb827; padding: 25px;"><i class="fas fa-user fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="yellow"><a href="#" style="color: #fdb827;"><strong>Option 2</strong></a></h3>
</div>
<div class="col3" style="background-color: #002d74; border-radius: 20px 20px 20px 20px; color: #fdb827; padding: 25px;"><i class="fas fa-search fa-fw fa-7x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #fdb827;"><strong>Option 3</strong></a></h3>
</div>
<div class="col3" style="background-color: #002d74; border-radius: 20px 20px 20px 20px; color: #fdb827; padding: 25px;"><i class="fas fa-shield-alt fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="yellow"><a href="#" style="color: #fdb827;"><strong>Option 4</strong></a></h3>
</div>
</div>
<p> </p>
<div class="col12" style="text-align: center;">
<div class="col3" style="background-color: #e8e8e8; border-radius: 5px 20px 5px; color: #002d74; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-file fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><strong><a href="#" style="color: #002d74;">Option 1</a></strong></h3>
</div>
<div class="col3" style="background-color: #e8e8e8; border-radius: 5px 20px 5px; color: #fdb827; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-user-graduate fa-7x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="yellow"><a href="#" style="color: #fdb827;"><strong>Option 2</strong></a></h3>
</div>
<div class="col3" style="background-color: #e8e8e8; border-radius: 5px 20px 5px; color: #002d74; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-th-list fa-fw fa-7x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #002d74;"><strong>Option 3</strong></a></h3>
</div>
<div class="col3" style="background-color: #e8e8e8; border-radius: 5px 20px 5px; color: #fdb827; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-check fa-fw fa-7x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #fdb827;"><strong>Option 4</strong></a></h3>
</div>
</div>
<p> <a href="#" style="color: #002d74;"></a></p>
<div class="col12" style="text-align: center;">
<div class="col2" style="background-color: #e8e8e8; border-radius: 20px 20px 0px 0px; color: #002d74; box-shadow: 7px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-file fa-3x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><strong><a href="#" style="color: #002d74;">Option 1</a></strong></h3>
</div>
<div class="col2" style="background-color: #002d74; border-radius: 20px 20px 0px 0px; color: #fdb827; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-link fa-3x fa-fw" ia-hidden="true" title="Icon Description"></i>
<h3 class="yellow"><a href="#" style="color: #fdb827;"><strong>Option 2</strong></a></h3>
</div>
<div class="col2" style="background-color: #002d74; border-radius: 20px 20px 0px 0px; color: #ffffff; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-star fa-fw fa-3x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #ffffff;"><strong>Option 3</strong></a></h3>
</div>
<div class="col2" style="background-color: #e8e8e8; border-radius: 20px 20px 0px 0px; color: #fdb827; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-envelope fa-fw fa-3x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #fdb827;"><strong>Option 4</strong></a></h3>
</div>
<div class="col2" style="background-color: #ffffff; border: 1px solid #e8e8e8; border-radius: 20px 20px 0px 0px; color: #002d74; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-user-circle fa-fw fa-3x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #002d74;"><strong>Option 5</strong></a></h3>
</div>
<div class="col2" style="background-color: #fdb827; outline-style: outset; border: 1px solid #fdb827; border-radius: 20px 20px 0px 0px; color: #ffffff; box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); padding: 25px;"><i class="fas fa-comment fa-fw fa-3x" ia-hidden="true" title="Icon Description"></i>
<h3 class="blue"><a href="#" style="color: #ffffff;"><strong>Option 6</strong></a></h3>
</div>
</div>
