---
sourceDocument: Interface do usuário da Now Platform Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Interface do usuário da Now Platform Yokohama

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Inclua um ícone de fonte em um único widget

# Inclua um ícone de fonte em um único widget {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

Se você quiser que apenas um widget tenha acesso a um ícone de fonte, inclua o ícone de fonte em um único widget.

## Antes de Iniciar

Função necessária: administrador ou sp_admin

## Por Que e Quando Desempenhar Esta Tarefa

A adição de um ícone a um widget específico mantém o ícone no escopo e impede que ele interfira com outro CSS na página.

## Procedimento

1. Na IU da plataforma, navegue até Portal de serviçosWidgets, em seguida, clique no widget ao qual você deseja adicionar um ícone.
2. Anexe o arquivo de ícone individual ao registro do widget.
3. No modelo HTML, inclua algo como o seguinte:  

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

   Certifique-se de que a classe seja exatamente igual à família de fontes chamada no CSS. Por exemplo, `<i class='material-icons'>`deve ser igual a `.material-icons `Incluído no CSS. . `icon_name `deve corresponder ao nome do arquivo anexado.
4. No campo CSS do widget, adicione o CSS para a definição do ícone de fonte.  
   A maioria dos conjuntos de ícones de fonte inclui um arquivo CSS semelhante aos ícones de material usados abaixo. Use o sys_id do anexo como `origem `No CSS. Por exemplo:

       /* 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}

## Resultado

Um ícone que você pode selecionar no widget ou na instância do widget. Por exemplo:

![Ícone de exemplo que corresponde ao HTML no exemplo do widget, com um círculo de verificação que diz "Você conseguiu!"]()

## O que Fazer Depois

Para usar ícones de fonte personalizados em widgets, adicione o ícone a uma página ou torne-o uma dependência de widget.
**Tarefas relacionadas**   

* [Incluir ícones de fonte em uma página](https://servicenow-prod.fluidtopics.net/~kshma2x9F7Fhhf4x7iYcw#include-font-icons-on-page "Inclua ícones de fonte em uma página para que todos os widgets na página tenham acesso ao conjunto de ícones de fonte.")
* [Incluir ícones de fonte como uma dependência de widget](https://servicenow-prod.fluidtopics.net/5NDKVMhpJaBhcYzL1T08pQ "Você pode incluir ícones de fonte sempre que um widget for carregado, incluindo-os como uma dependência de widget.")