JSGrid add icon instead of text based on true or false value

I am trying to add an icon(a lock) based on whether a value is true or false in a JSGrid.

I have a variable called SoftLock, and if this is true I want to insert a lock icon on the grid.

I have the following fields but am unsure about how to continue:

var fields = [
                        { name: 'ID', type: 'text', visible: false },
//THIS FIELD BELOW
                        { name: 'SoftLock', type: 'text', title: 'Locked', formatter : function () {return "<span class='fa fa-lock'><i class='fa fa-lock' aria-hidden='true'></i></span>"} },
//THIS FIELD ABOVE
                        { name: 'Status', type: 'select', items: MatterStatusEnum.List, valueField: 'Id', textField: 'Name', width: 70, title: 'Account Status' },
                        { name: 'AttorneyRef', type: 'text', title: 'Reference' },
                        { name: 'Investors', type: 'text', title: 'Investor/s' },
                        { name: 'AccountNumber', type: 'text', width: 70, title: 'Account Number' },
                        { name: 'IntermediaryName', type: 'text', title: 'Intermediary Name' },
                        { name: 'CreatedBy', type: 'text', title: 'Captured By' },
                        { name: 'RequestedDate', type: 'date', title: 'Requested Date'}
                ];

I have used the formatter with no luck. Also, how can I show an icon if true, and nothing if false.

Any help would be appreciated.

I solved this by using the itemTemplate as follows:

{ 
name: 'SoftLock', type: 'text', title: 'Locked', width: 30, 
itemTemplate : function (value, item) {
    var iconClass = "";
    if (value == true) {
        iconClass = "fa fa-lock"; //this is my class with an icon
    } 
    return $("<span>").attr("class", iconClass);
}

Simple as that :)