Need help on styling the icon in service portal - html

Question

I am working on Servicenow service portal where i created a custom icon-link widget that displays the image as glyph icon.
I almost got everything but my image is stylying as-is comparing to glyph icon.
/* CIRCLE ICON ---------- */
a.circle_icon {
display: block;
padding: 20px 0px 20px 70px;
position: relative;
}
a.circle_icon .fa {
position:absolute;
left: 0px;
top: 10px;
}
/* Image Circle ------- */
a.image_icon {
display: block;
padding: 20px 0px 20px 70px;
position: relative;
}
a.image_icon .fa {
position:absolute;
left: 0px;
top: 10px;
}
<!--// Circle Icon -->
<a ng-if="::(options.link_template == 'Circle Icon')" ng-href="{{::data.href}}" class="circle_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
</span>
<h2>{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</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}}">
<span class="fa fa-stack fa-2x">
<img src="{{data.target}}"/>
</span>
<h2>{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</a>
With this code my output looks like this.
Click here
Circle Icon is Out of the box and Image icon is my custom code. I want the aeroplance image looks same as above Get help and Community icon.

Answer 1

I have a few followup questions for you.
1.What is the reason for creating a new widget? (Instead of using Icon link OOB widget)
I'm assuming you wanted to have a custom image in place of the
bootstrap icon.
if yes there is an alternate solution without cloning also you can use your custom image. (Using page in designer add a class, Write style[custom image css] and that's it, without cloning its possible)
2.With the OOB Icon link widget, you can do that with instance options, if you cloned the OOB Icon link widget you can go to instance options add modify,
How to do that?
Right-click on the widget, go to instance options.
scroll to the bottom last field Template has the option as 'Circle icon'
Save and done (Please refer to screenshots attached below)