add image on icon link widget,How can we do that?

[Varsha21]

Hello Team,

I want to add the image at the top and below a description for the link, it can be like an icon link widget.

e.g. like

How can we do that?

I have gone through the below links but did not get a solution.

http://conyxit.com/custom-glyph-in-servicenow-portal-icon-link-widget/

http://sn.sptrac.com/?p=155

https://community.servicenow.com/community?id=community_question&sys_id=fc924ae61b048c18d01143f6fe4b...

Thanks in advance.

[Pranav Bhagat · Accepted solution]

Try this 

Upload the image in images table.

  <!--// 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}}">
    
<img src="<imagename>.jpg" width="500" height="600">
<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>

Regards

Pranav

[Varsha21]

Thank you Pranav,

It worked.

[Pravallika1]

@Pranav Bhagat 

I had the same requirement in my project and used the same solution.

Adding the line 

<img src="<imagename>.jpg" width="500" height="600">

in Circle Icon didnt work for me instead it worked when I added it on Top Icon , but the image is not loaded.

Please help me with what I am missing..

[TasmiyaDev Shai]

Hey Pravallika,

You need to replace the "<imagename>.jpg" with your image name.

Make sure to add the image into the db_image table before replacing it.

<img src="<imagename>.jpg" width="500" height="600">

Make sure to mark this helpful if done.

Thanks 

Cheers!