I have been working on the Servicenow service portal and recently created a custom icon-link widget that displays images as glyph icons.
Although I have almost completed everything, I am facing an issue where my image is not styling correctly compared to the 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>
When I implement this code, the output appears like this. Click here
The Circle Icon looks perfect out of the box, but the Image icon, which is my custom code, does not match the appearance of the Get Help and Community icons. Specifically, I want the airplane image to resemble those above.