---
sourceDocument: Australia ServiceNow AI Platform user interface
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/platform-user-interface

 Release :

    - australia

ft:locale :

    - de-DE

ft:publication_title :

    - Australia ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Include a font icon in a single widget

# Include a font icon in a single widget {#ariaid-title1}

* Freigeben Version: Australia
* 
* Aktualisiert 12. März 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 Minute Lesedauer

If you only want one widget to have access to a font icon, include the font icon in a
single widget.

## Vorbereitungen

Role required: admin or sp_admin

## Warum und wann dieser Vorgang ausgeführt wird

Adding an icon to a specific widget keeps the icon scoped and prevents it from interfering
with other CSS on the page.

## Prozedur

1. In the platform UI, navigate to Service PortalWidgets, then click the widget you want to add an icon to.
2. Attach the individual icon file to the widget record.
3. In the HTML template, include something like the following:  

       <div>
       <i class='font-family'>icon_name</i> you did it!
       </div>

   Make sure that the class is exactly the same as the font family called out in the CSS. For
   example, `<i class='material-icons'>` should be the same as the
   `.material-icons` included in the CSS. The `icon_name`
   should match the name of the file you attached.
4. In the CSS field for the widget, add the CSS for the font-icon definition.  
   Most font-icon sets include a CSS file similar to the material icons one used below. Use the sys_id of the attachment as the `src` in the CSS. For example:

       /* fallback */
       @font-face {
         font-family: 'Material Icons';
         font-style: normal;
         font-weight: 400;
         src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');
       }

       .material-icons {
         font-family: 'Material Icons';
         font-weight: normal;
         font-style: normal;
         font-size: 24px;  /* Preferred icon size */
         display: inline-block;
         line-height: 1;
         text-transform: none;
         letter-spacing: normal;
         word-wrap: normal;
         white-space: nowrap;
         direction: ltr;

         /* Support for all WebKit browsers. */
         -webkit-font-smoothing: antialiased;
         /* Support for Safari and Chrome. */
         text-rendering: optimizeLegibility;

         /* Support for Firefox. */
         -moz-osx-font-smoothing: grayscale;

         /* Support for IE. */
         font-feature-settings: 'liga';
       }

{#include-widget-icon__ol_tyy_n13_qy}

## Ergebnisse

An icon that you can select in the widget or widget instance. For example:

![Example icon that matches the HTML in the widget example, with a check circle that says "you did it!"]()

## Nächste Maßnahme

To use custom font-icons across widgets, add the icon to a page or make it a widget
dependency.
**Zugehörige Tasks**   

* [Include font icons on a page](https://servicenow-prod.fluidtopics.net/FDD9V2CBCWZjM~zIedyFHQ#include-font-icons-on-page "Include font icons on a page so that all the widgets on the page have access to the font-icon set.")
* [Include font icons as a widget dependency](https://servicenow-prod.fluidtopics.net/I4mHoaDIJLNMrTwthX3lfg "You can include font icons wherever a widget is loaded by including them as a widget dependency.")