Custom Glyph in ServiceNow portal – Icon Link widget

Step1: You have to upload the image to image to the table db_image
Step2: Clone the widget Icon Link
Step3: Html code is as below

<div>
<!–// Top Icon –>
<a ng-if=”::(options.link_template == ‘Glyph Icon’ || !options.link_template)” ng-href=”{{::data.href}}” class=”glyph_icon {{::options.class_name}}” target=”{{::data.target}}”>
<div class=”m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}” align=”center” style=”margin-right: auto; margin-left: auto; display: block;”></div>
<h4 style=”text-align: center;”>{{::options.title}}</h4>
<span class=”text-muted”>{{::options.short_description}}</span>
<p>  </p>
</a>

<!–// Image Icon –>
<a ng-if=”::(options.link_template == ‘Image Icon’)” ng-href=”{{::data.href}}” class=”image_icon {{::options.class_name}} text-{{::options.color}}” target=”{{::data.target}}”>
<div><img   src=”{{data.image}}” alt=”” align=”left” style=”margin-right: 7px; margin-left: auto; display: block;”/>
<h3 style=”font-weight: 300; margin-top: 22px”>{{::options.title}}</h3>
<span class=”text-muted”>{{::options.short_description}}</span></div>
<p>  </p>
</a>

</div>

Step4: Server side coding

(function(){
var gr = $sp.getInstanceRecord();
data.href = $sp.getMenuHREF(gr);
data.target = options.target || “”;

var img = new GlideRecord(‘db_image’);
img.addQuery(‘name’, ‘custom_icon.png’);
img.query();
if (img.next()){
data.image = img.getValue(‘name’);
}
})();