In Portal Homepage, how to replace Glyph in 'Instance with Link' record with custom icon?

[Pranshu3]

Hi all,

My client has requested to replace the existing icons on 'Instance with Link' records (like Request Something, Knowledge Base, Get Help) with their custom icons.
We use the Glyph field of the record in 'Icon Link' widget to show the icons in Portal Homepage.
How to replace glyph with custom icons?

[Pranshu3 · Accepted solution]

Hi, got the answer!

The final outcome would be like:

Steps to replicate:

1. Upload the image to be put as icon. [Generally .svg file]

2. Clone the 'Icon Link' widget which is being used to show the icon as 'U Icon Link' widget.

3. Update the 'Instance with Link' record (Ex : Request Something) with new 'U Icon Link' widget.
    Also, ID field with 'request-something' to check for easy conditions and not get impacted by future Title changes.

4. In the new 'U Icon Link' widget, make the below HTML-Template changes:
   <!--// Circle Icon -->
   <a ng-if="::(options.link_template == 'Circle Icon')" ng-href="{{::data.href}}"...
     <span class="fa fa-2x sh-icon-circle">
       <!--<i class="fa fa-circle fa-stack-2x"></i>
       <i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>-->
       <img ng-if="::(options.id == 'request-something')" src="sh_icon_request.svg"/>
       <img ng-if="::(options.id == 'knowledge-articles')" src="sh_icon_knowledge.svg"/>
       <img ng-if="::(options.id == 'get-help')" src="sh_icon_help.svg"/>
     </span>
     <h2>{{::options.title}}</h2>
     <span class="text-muted">{{::options.short_description}}</span>
   </a>

5. The above sh-icon-circle class is defined in CSS as below:
    .sh-icon-circle {
      padding: 16px;
      border-radius: 50%;
      box-shadow:0px 1px 1px grey;
    }

6. To have icon change for just 1 'Intance with Link' record and leave the others use below in HTML-Template:
    <span class="fa fa-2x sh-icon-circle">
       <span ng-if="::(options.id != 'request-something')">
         <i class="fa fa-circle fa-stack-2x"></i>
         <i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
       </span>
       <img ng-if="::(options.id == 'request-something')" src="sh_icon_request.svg"/>
     </span>

Hope it helps!