HTML widget styling

[creaky]

I've been playing around with HTML widgets which look like so



This is the HTML

<div class="html-widget widget-new-showcase">
	<h3>Add some hardware</h3>
		<p>Got a favourite console or piece of gaming hardware. Add it to the database and share it with others.</p>
		<p>Once you've added it head over to the forum's and talk with other gamers.</p>
		<a href="add" data-xf-click="overlay" class="widget-button"><i class="far fa-edit"></i> Add item</a>
</div>

This is the CSS

.html-widget {
	background: #236FD2;
	color: #fff;
	padding: 18px;
	border-radius: 4px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}
.html-widget h3 {
    margin: 0;
    line-height: 1.1;
    z-index: 1;
    position: relative;
}
.html-widget p {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin: 5px 0 9px;
    z-index: 1;
    position: relative;
    line-height: 1.3;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.30);
}

.html-widget a.widget-button {
    padding: 8px 15px;
    color: #fff;
    font-weight: bold;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    z-index: 1;
    position: relative;
    display: inline-block;
    font-size: 14px;
}
.html-widget a.widget-button i {
    opacity: 0.8;
    margin-right: 4px;
}
.html-widget.widget-new-post {
	background: linear-gradient(to right, #236FD2, #185FBC);
}
.html-widget.widget-new-blog {
	background: linear-gradient(to left, #70b341, #41b34b);
}
.html-widget.widget-new-showcase {
	background: linear-gradient(to left, #af0707, #c66a62);
}

What I would like to do is use a font awesome icon as a background to each widget, a different icon for each widget Is that possible?

 

[Russ]

Maybe try adding this?

&.widget-new-showcase &:before
{
   .m-faBase();
   .m-faContent("\f27a");
position: absolute;
font-size: 60px;
}

.html-widget {
    background: #236FD2;
    color: #fff;
    padding: 18px;
    border-radius: 4px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
&.widget-new-showcase &:before
{
   .m-faBase();
   .m-faContent("\f27a");
position: absolute;
font-size: 60px;
}
}
.html-widget h3 {
    margin: 0;
    line-height: 1.1;
    z-index: 1;
    position: relative;
}
.html-widget p {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin: 5px 0 9px;
    z-index: 1;
    position: relative;
    line-height: 1.3;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.30);
}

.html-widget a.widget-button {
    padding: 8px 15px;
    color: #fff;
    font-weight: bold;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    z-index: 1;
    position: relative;
    display: inline-block;
    font-size: 14px;
}
.html-widget a.widget-button i {
    opacity: 0.8;
    margin-right: 4px;
}
.html-widget.widget-new-post {
    background: linear-gradient(to right, #236FD2, #185FBC);
}
.html-widget.widget-new-blog {
    background: linear-gradient(to left, #70b341, #41b34b);
}
.html-widget.widget-new-showcase {
    background: linear-gradient(to left, #af0707, #c66a62);
}