I used this to implement acustom icon “funkdiag” as though it were font-awesome:
.fa.funkdiag:before { /*should be font-size in .service-icon*/
content: url('/wp-content/uploads/2014/11/.....png');
}
.service-icon {
font-size: 80px;
width:100px;
height:100px;
}
so you’ll choose “funkdiag” as the icon when you create the service in the backend.
I used this to add a custom background image to a text widget in my case (should be adaptable to every other widget)
#appointment {
padding-bottom: 50px !important;
display: block;
background: url(/wp-content/uploads/2014/11/terminvereinbarung-w.jpg) no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
z-index: -1;
}
Where the text widget contains this:
<section id="appointment" class="appointment-area"><div class="container">
<h3 class="widget-title">TITLE</h3>
<div class="textwidget">
CONTENTCONTENTCONTENT
</div></div></section>
For the background I had to remove surrounding text-widget-specific tags using this js:
jQuery(document).ready(function($){
var c = document.getElementById('appointment');
$(c.parentNode.parentNode).replaceWith(function() { return c; });
});
Good luck!