You can easily change what icon will be displayed in box by changing icon class. Here you will find full set of icons.
{Theme} have 4 varations of icon boxes that are using the classes you can see below.
- .ct-iconBox–type1
- .ct-iconBox–type2
- ct-iconBox–type4
- ct-iconBox–type5
HTML markup example
|
1 2 3 4 5 6 |
<div class="ct-iconBox ct-iconBox--type1"> <div class="ct-iconBox-icon"><i class="fa fa-shield"></i> </div> <h6 class="ct-iconBox-title">Durable</h6> <p class="ct-iconBox-description">For special tasks</p> </div> |
Screenshot
Icon box ver.1
HTML markup example
|
1 2 3 4 5 6 |
<div class="ct-iconBox ct-iconBox--type2"> <div class="ct-iconBox-icon"><i class="fa fa-shield"></i> </div> <h6 class="ct-iconBox-title">Durable</h6> <p class="ct-iconBox-description">For special tasks</p> </div> |
Screenshot
Icon box ver.2
HTML markup example
|
1 2 3 4 5 6 |
<div class="ct-iconBox ct-iconBox--type4"> <div class="ct-iconBox-icon"><i class="fa fa-shield"></i> </div> <h6 class="ct-iconBox-title">Durable</h6> <p class="ct-iconBox-description">For special tasks</p> </div> |
Screenshot
Icon box ver.4
HTML markup example
|
1 2 3 4 5 6 |
<div class="ct-iconBox ct-iconBox--type5"> <div class="ct-iconBox-icon"><i class="fa fa-shield"></i> </div> <h6 class="ct-iconBox-title">Durable</h6> <p class="ct-iconBox-description">For special tasks</p> </div> |
Screenshot
Icon box ver.5