Today's tip - How to add more icons the simple way!

To have global access to icons add the code below in your child theme style.css

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

Then in the upfront page editor drag a code box to where you want your icons

In my example:

HTML Code:

<ul class="socials">
<li><a href="#"><i class="fa fa-facebook-official fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-instagram fa-2x"></i></a></li>
</ul>

CSS Code:

.socials {
    list-style: none;
    padding: 0px;
    margin: -3px 0px;
}
.socials li {
    display: inline-block;
}
.socials li a {
    display: block;
    width: 20px;
    margin: 0 5px;
    color: #fff;
}
.socials li a:hover {
    color: #333;
}

That's it!

Here is a list of all icons: http://fortawesome.github.io/Font-Awesome/icons/

Enjoy