UI Buttons Use FontAwesome icons instead of bitmaps

Basic Building Blocks Series: Within the basic building blocks series over time I will add all the little things which someone who just starts with Serenity Framework would have to spend a lot of time figuring it out him/herself.

What you get with this article: Change the buttons to use FontAwesome icons instead of bitmaps.

Credits goes to: @wezmag

Within /Content/Serenity/serenity.css search for the desired button class (e.g. 'delete-button') and replace the following:

.delete-button span.button-inner {
    background-image: url(images/cross-script.png);
}

with

.delete-button span.button-inner:before {
    content: "\f014";
    font-family: FontAwesome;
    padding-right:3px;
    color: #a94442;
}
.delete-button span.button-inner {
    padding-left: 3px;
}