Service Portal - Custom Icons

[arnabbose]

Hello,

Our client wants us to provide below custom images in the SP Homepage Icons. As per my understanding only glyphs available in below link are usable. https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

• Can this be done with OOB UI or Custom UI needs to be put in?
• If this can be done by any other way (may be re-structuring the Widgets) ; please can you let me know how.

[Jon Barnes]

you are not restricted to glyphs. You can use custom images as well, you would just need to upload those images to your instance, and then create the html in a widget to display those images with the appropriate links.

[arnabbose]

Please can you help me with a sample code snippet?

[Jon Barnes]

have a look at the "Icon Link" widget. You can clone that widget and customize it to show images instead of glyphs, or you can even make it where you can select a glyph or an image.

[Jon Barnes]

here is a sample. I cloned the Icon Link widget in my personal instance, and then altered the markup on just the color box option, but you could do the same on all 3 of the types there.   Then, you would have to create a new configuration option for your widget called "image" where the user can enter the path to the image they want to show.   This is untested. The parts in bold are what I added.

<!--// Color Box -->

  <a ng-if="::(options.link_template == 'Color Box')" ng-href="{{::data.href}}" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white" target="{{::data.target}}">

      <div ng-if="::options.glyph" class="fa fa-{{::options.glyph}} fa-3x {{::options.class_name}}"></div>

      <img ng-if="::options.image" src="::options.image" class="{{::options.class_name}}"/>

      <h3>{{::options.title}}</h3>

      <span>{{::options.short_description}}</span>

  </a>