icon is not displayed on widget?

[Kiran Kumar 76]

i tried adding quick links widget on sp portal and tried to add an glyph icon ,isn't-showing on the portal

[Danish Bhairag2]

Hi @Kiran Kumar 76 ,

You can try with icon link widget, where u can provide the link to where it should navigate also add the icons from the available list. Try going with this it should serve the same purpose.

U can add icons easily to icon link widget by opening the page from page designer & edit the widget from the respective container, u will see a field containing glyph icon. Select from the huge available list

Mark my answer helpful & accepted if it helps you achieve ur requirement.

Thanks,

Danish

[Kiran Kumar 76]

Hi @Danish Bhairag2 

i need to show few links here and the icon link isn't helping me well in this scenario 

[Danish Bhairag2 · Accepted solution]

Hi @Kiran Kumar 76 ,

Ohh ok can u try the below code if it works (untested).

1. **Create a New Widget:**

   - Navigate to `Service Portal > Widgets` in ServiceNow.

   - Create a new widget of type "HTML" or "Server Script" based on your requirements. For this example, let's consider using an "HTML" widget.

2. **Design the Widget:**

   - In the widget configuration, design the HTML structure to display links with icons. You can use HTML and CSS to structure and style the widget.

   Example HTML structure:

   <div class="widget-container">

       <a href="link1_url">

           <div class="link-item">

               <img src="icon1_url" alt="Icon 1">

               Link 1

           </div>

       </a>

       <a href="link2_url">

           <div class="link-item">

               <img src="icon2_url" alt="Icon 2">

               Link 2

           </div>

       </a>

       <!-- Add more links as needed -->

   </div>

   Example CSS (you can include this within the widget or in a separate CSS file):

   .widget-container {

       display: flex;

       flex-direction: column;

   }

   .link-item {

       display: flex;

       align-items: center;

       margin-bottom: 10px;

   }

   .link-item img {

       width: 20px; /* Adjust the icon size as needed */

       margin-right: 10px;

   }

   Replace `link1_url`, `icon1_url`, `link2_url`, and `icon2_url` with the actual URLs for your links and icons.

3. **Save and Publish the Widget:**

   - Save your widget configuration.

   - Publish the widget to make it available for use in your Service Portal pages.

4. **Add the Widget to a Service Portal Page:**

   - Go to the desired Service Portal page where you want to display the links with icons.

   - Edit the page and add your newly created widget to the desired location on the page.

5. **Test the Service Portal Page:**

   - Save the Service Portal page.

   - Preview or publish the page to see the links with icons displayed in the Service Portal.

By following these steps, you'll have a widget in Service Portal that displays links with icons. Make sure to customize the HTML, CSS, and URLs according to your specific requirements and design preferences.

Mark my answer as helpful & accepted if it helps you achieve your requirement.

Thanks,

Danish