This theme offers two layout styles for icon boxes, the default centered one, as well a left aligned icon:
Create an Icon Box
- Copy your snippet from below
- Go to your page, post, or text widget, and paste the code into it. For pages and posts, make sure you paste this code in the “Text” editor view because you are working with HTML code
- Replace the sample content with your own. I recommend you do most of this while in the “text” view so you don’t accidentally delete an html tag like a
<div>etc. - Change the sample icon “icon-mobile” to the one you want (see further below for a list of available icons)
- Save your page, post, or widget
Defaut Icon Box Snippet
This is an example from the first icon box on the live demo site:
<div class="pref-icon-box">
<div class="pref-icon-header">
<div class="icomoon icon-stack"></div>
<h3>Mobile Responsive</h3>
</div>
<div class="pref-icon-content">
<p>Using Twitter’s Bootstrap framework, you get a theme that is build to give you a responsive website that can be viewed on most mobile devices.</p>
</div>
</div>
Left Icon Box Snippet
This is an example from the first icon box on the live demo site:
<div class="pref-icon-box left"> <div class="pref-icon-header"> <div class="icomoon icon-stack"></div> <h3>Lorem Ipsum Delore</h3> </div> <div class="pref-icon-content"> <p>Donec nisi nisi, ornare vitae ligula quis, iaculis fermentum est. Integer sed tempor justo. Donec metus metus, condimentum at augue nec, posuere facilisis justo. Vivamus lacus purus, iaculis vitae iaculis eu, dictum sed ante. Nunc ut dui ac lorem molestie.</p> </div> </div>