Configurar um ícone de fonte para usar uma variável de tema para definir sua cor

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 2 min. de leitura
  • Especifique a propriedade personalizada de CSS de um registro sys_ux_theme para definir a cor de um ícone de fonte.

    Antes de Iniciar

    Você deve saber o registro sys_ux_theme da variável do tema que deseja usar para definir a cor do ícone da fonte. O valor necessário para a variável do tema é a propriedade personalizada de CSS na tabela de propriedades sys_ux_theme.

    Função necessária: admin

    Por Que e Quando Desempenhar Esta Tarefa

    As variáveis de tema só podem ser aplicadas a ícones de fonte.

    Você pode configurar um ícone no fluxo de trabalho de configuração de uma tela ou pode configurar um ícone selecionando a categoria Cartões e ícones no menu Construtor de apps para celular. Este procedimento usa a categoria Cartões e ícones.

    Procedimento

    1. Navegar até Todos > Sistema Móvel > Construtor de apps para celular.
      O Construtor de apps para celular é aberto em uma nova guia do navegador e exibe a tela de seleção do escopo da aplicação.
    2. Pesquise o escopo da aplicação no qual você está trabalhando e selecione o nome do escopo da aplicação.
      A tela inicial de Construtor de apps para celular categorias é exibida.
    3. Selecione a categoria Cartões e ícones e selecione Novo.
    4. Na caixa de diálogo Criar um cartão ou ícone, selecione Íconee Continuar.
    5. No formulário Ícone, insira um Nome para o ícone.
      Certifique-se de escolher um nome que facilite a identificação do ícone.
    6. Na lista suspensa Tipo, selecione Fonte.
    7. Na seção Definir aparência, insira as seguintes informações nos campos Estilo e Valor para configurar o ícone de fonte que usa uma variável de tema para definir sua cor.

      Selecione o ícone de adição para adicionar uma linha.

      Estilo Valor
      Inserir nome da fonte

      Insira uma das seguintes famílias de fontes:

      • now-mobile-icons

        Esses ícones foram projetados para serem usados em telas. Use-os para listas e destinos de seção que vão para telas de lista e telas do navegador. Use esses ícones para representar um fluxo de trabalho ou uma tela para a qual você deseja que os usuários naveguem.

      • now-mobile-icons-cards

        Use esses ícones no corpo dos cartões.

      • now-mobile-icons-buttons

        Esses ícones foram projetados para serem usados para funções. Eles podem ser usados em botões localizados em cartões ou para ações rápidas.

      • now-mobile-icons-ALPnavbar

        Esses ícones aparecem no canto superior direito da tela do celular e são usados como navegação para outra tela.

      Inserir valor

      Insira o código que identifica o ícone na família de fontes que você deseja usar. Por exemplo, e903 é o código do ícone de carrinho sólido na família de fontes now-mobile-icons-buttons.

      Para obter listas de códigos de ícone da família de fontes, consulte [adicionar link para tópicos de referência].

      Insira FontColorVariable para especificar uma variável de tema para a cor do seu ícone.

      Esta configuração é opcional. Se você não especificar uma cor, a cor do ícone padrão será preta. Se você quiser usar um código de cor hexadecimal, consulte [link para 'Configurar ícones de tipo de fonte'], que contém informações sobre como configurar a cor do ícone usando códigos de cores hexadecimais.

      Insira a variável de tema para a cor que você deseja usar. Por exemplo, a seguinte propriedade personalizada de CSS:

      --now-acordeão-cor

      Inserir nome

      Insira o nome listado para o ícone na família de fontes. Por exemplo, se você quiser usar o ícone do carrinho de compras na família now-mobile-icons, insira Carrinho.

      Para obter listas de nomes de ícones da família de fontes, consulte o Referência de ícone para dispositivos móveis.

    8. Selecione Salvar.