Incluir um ícone de fonte em um único widget

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 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

    Adicionar um ícone a um widget específico mantém o ícone no escopo e evita que ele interfira com outro CSS na página.

    Procedimento

    1. Na IU da plataforma, navegue até Portal de serviços > Widgets, 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';
}

    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.