Step1: You have to upload the image to image to the table "db_image"
Step2: Clone the widget Icon Link
Step3: Use the below Html code and Server Side code
HTML:
<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="center" style="margin-right: auto; margin-left: auto; display: block;"/>
<h4 style="text-align: center;">{{::options.title}}</h4>
<span class="text-muted">{{::options.short_description}}</span></div>
<p> </p>
</a>
Server Script:
(function(){
var gr = $sp.getInstanceRecord();
data.href = $sp.getMenuHREF(gr);
data.target = options.target || "";
var img = new GlideRecord('db_image');
img.addQuery('sys_id', options.image);
img.query()
if (img.next()){
data.image = img.getValue('name')
}
})();
Please mark as Correct Answer/Helpful, if applicable.
Thanks!
Kashyap
