Favorite icon(Heart) in Employee Center

[Rajendar3]

I'm currently working on the Employee Center for my project, and I need to replace the 'My Favorites' with the Heart icon in the Employee Center homepage header. Initially, it was a Heart icon, but after a recent upgrade of the Employee Center plugins, it changed to 'My Favorites'.

Before upgrade 

How can I display it?

Thanks in advance!

[Mark Roethof]

Please do be more specific. What did you add? Where did you add it? What kind of errors?

[Rajendar3]

Hey Mark,
I have added the below code in the HTML section,

and getting these errors, and the widget itself is not loading in the portal

[Community Alums]

Hi @Rajendar3 ,

I have the same requirement can you please tell how you have achieved. 

[Kashmira Surana]

Hello @Rajendar3 

We experienced an instance upgrade that modified the “My Favorites” section, replacing the heart icon with text. To restore the heart icon, follow these steps to modify the Employee Center Header widget:

Steps to Replace “My Favorites” Text with Heart Icon

1. Navigate to Headers & Footers:

   • Go to Service Portal in the filter navigator.

   • Select Headers & Footers.

2. Locate the Employee Center Header Widget:

   • Search for Employee Center Header and open the record.

3. Find the Relevant Code:

   • Look for the comment <!-- Header Navbar -->. Below this comment, locate the following code for “My Favorites”:

   • <li class="gt-menu-item" role="presentation" ng-if="data.isFavoritesEnabled">
     <a href="?id=favorites_list" id="favorites" aria-label="${My favorites}" role="menuitem">
     <span ng-bind-html="'${My Favorites}'" aria-hidden="true"></span>
     </a>
     </li>

4. Modify the Span Tag:

   • In the above code, replace the existing span code with the following:

   •  <span aria-hidden="true"><i class="fa fa-heart"></i></span>

5. Save and Refresh:

   • Save your changes and refresh the Employee Service Center (ESC). Note that a widget error might appear initially.

6. Resolve the Widget Error:

   • Navigate to System Applications > Application Restricted Caller Access.

   • Locate the invalidated record for the script include “todoPageUtils” in Employee Center Core.

   • Change the status to Allowed.

7. Final Check:

   • Refresh the ESC. The error will disappear, and the “My Favorites” section will display the heart icon.

Please find the attached screenshot for your reference.

@Rajendar3 Please mark my answer as accepted solution and helpful. If it is works for you.

Thank you.

[Jesse_H]

I have a different approach you could try for swapping My Favorites for the heart icon using CSS:

Create a new stylesheet (sp_css), paste this:

@media  (min-width: 1115px) {

  #favorites {
      display: inline-block;
      height: 100%;
      width: 100%;
      font-size: 0px;
  }
  #favorites::before,  {
      font-family: "FontAwesome" !important;
      content: "\f004";
      font: normal normal normal 14px / 1 FontAwesome;
      font-size: initial;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
  }
}

...Then go to your EC Theme (sp_theme) > CSS Includes (related list) > New:

Source: Style Sheet
Style Sheet: (select the one you just created above)

You can remove the "@media" if you'd like the heart icon to display even when the screen size is small and the mobile menu displays.