Como usar e aproveitar ao máximo?

Ícones são fascinantes!

Eles têm o poder de se comunicar rapidamente com o público, estabelecendo uma forte conexão visual.

É por isso que os ícones são amplamente usados ​​em todos os lugares, incluindo sites WordPress.

Além disso, usar o mesmo tema em seu site por vários meses pode ser chato. É comum.

E então, você estará em busca de algo mais interessante, usando isso, e ficará entediado de novo,

E o ciclo continua…

Então, como você pode pular esse ciclo de tédio?

Dashicons são uma excelente maneira!

Pode apimentar a estética do seu site e ajudá-lo a se destacar. Isso também evitará que você faça esforços extras e sobrecarregue seu site com imagens desnecessárias que diminuem a velocidade da página.

Então, vamos explorar Dashicons e como você pode usá-los de forma eficaz em seu site WordPress.

O que são Dashicons do WordPress?

Dashicons são fontes de ícones oficiais do WordPress introduzidas anos atrás com sua versão 3.8. Essas fontes são legais e incríveis de se ver se você usá-las em seu site. São arquivos SVG de alta qualidade que você pode escalar facilmente para qualquer tamanho sem pixelização.

Como eles possuem suporte nativo ao WordPress por serem criados pela própria equipe, você pode usá-los diretamente sem carregar scripts adicionais. Existem cerca de 350 fontes de ícones incluídas, que você pode encontrar dentro do site oficial Recursos para desenvolvedores do WordPress.

  Como ver quais dispositivos estão usando sua conta de vídeo da Amazon

Eles categorizaram esses ícones com base no tópico, além disso, você pode ver um campo de pesquisa dinâmico que permite filtrar os ícones disponíveis.

Você pode usar esses ícones em:

  • Painel do WordPress
  • Menus de navegação
  • Páginas e postagens
  • Metadados
  • Elementos do editor
  • Plugins e temas personalizados
  • Painéis de administração
  • Design de front-end

Você percebe que estou dizendo “ícones” repetidamente?

Aqui, quero dizer apenas fontes de ícones.

Não imagens na forma de ícones.

Sim, há uma diferença entre os dois.

Vamos desvendar isso.

Diferença entre ícones de imagem e fontes de ícones?

As fontes de ícones e os ícones de imagem são um pouco semelhantes, mas em vez de alfabetos, os símbolos vetoriais estão presentes nas fontes de ícones.

Isso ficou muito técnico?

Deixe-me esclarecer isso.

Basicamente, essas fontes de ícones se assemelham a imagens que você pode usar para adicionar símbolos em seu site, mas não uma imagem real.

Eles oferecem muitos benefícios para você.

Como?

Descubra na próxima seção.

Por que você deve usá-los?

  • Escalável como os textos usados ​​em seu site como fontes
  • Leve que não afeta a velocidade de carregamento da página em comparação com as imagens
  • Capaz de definir a cor do ícone por meio de CSS e adicionar propriedades extras, como gradiente de cor, sombra etc.
  • Ótimo para salvar muitas solicitações HTTP, permitindo que você carregue fontes de uma só vez, que você pode usar em suas páginas. Se você usar muitas imagens no site, terá que fazer muitos pedidos para buscá-las, o que aumenta o tempo de carregamento da página.
  • Fácil de usar e ajustar do que as imagens. Você pode adicionar símbolos reconhecíveis e criativos sem a necessidade de recriá-los toda vez que precisar de um ícone para um reprodutor de vídeo, e-mail, música ou qualquer outra coisa.
  • Maior acessibilidade porque eles são integrados ao WordPress
  Como verificar a configuração e as configurações da câmera usadas para tirar uma foto

Como usá-los?

Usar Dashicons não é engenharia de foguetes.

Confie em mim; conheço os dois :0

Basta seguir algumas etapas mencionadas abaixo para começar a usar o WordPress Dashicons.

Passo 1: Habilitar Dashicons em seu site WordPress

Antes de começar, habilite Dashicons onde você precisa, por exemplo, um tema. Para isso, você precisa adicionar alguns códigos ao arquivo function.php.

Para fazer:

  • Primeiro, vá para o Editor de tema/aparência no painel do WordPress.
  • Abra o arquivo function.php.
  • Role até o final do arquivo e adicione algumas linhas de código para enfileirar scripts
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

O exemplo acima é para habilitar Dashicons no frontend.

Certifique-se de criar um tema filho antes de editar o arquivo functions.php. É porque se você editar diretamente o arquivo de tema e, em seguida, vier uma atualização para esse tema, ela substituirá todas as alterações feitas no arquivo.

Etapa 2: encontre os códigos HTML e CSS Dashicon

O WordPress.org oferece uma biblioteca de Dashicons, que ajuda você a encontrar códigos CSS e HTML pertencentes a cada ícone. Aqui, vá para Recursos do desenvolvedor para encontrar os Dashicons que deseja usar e depois:

  • Clique no ícone do seu desejo.
  • Escolha entre “Copiar CSS” ou “Copiar HTML” clicando nele.
  • Agora, você verá uma janela pop-up. Basta copiar o código para a área de transferência.
  • Decida onde deseja usar o ícone, como temas, metadados, menu de navegação, etc.
  • Cole o código copiado no Widget de texto ou no Editor de texto do local escolhido.
  • Modifique a aparência dos ícones usando CSS personalizado
  5 ferramentas do Hosting Checker para verificar quem está hospedando um site

É isso.

Além disso, por padrão, todos os ícones têm tamanho de 20 pixels. Você pode alterá-lo usando os elementos CSS de opções como Inspecionar elemento do Google Chrome ou FireBug do Firefox.

Como aproveitar ao máximo os Dashicons do WordPress?

Você viu como pode usar Dashicons em seu site e agora veremos seu uso para fins específicos.

1. Usando o menu de navegação

Para adicionar ícones ao menu, siga os passos abaixo:

  • Vá para Menus/Aparência no painel
  • Copie os códigos HTML projetados para o ícone do menu do WordPress.org
  • Cole-o no “Etiqueta de Navegação” no painel
  • Clique no botão “salvar” e carregue a página inicial. Ele deve exibir o ícone legal e nítido.

2. Usando no post meta

Você poderá usar Dashicons apenas na frente de uma data, nome do autor, tag ou categoria com base no tema mais os dados exibidos.

Como você já colocou Dashicons na fila, abra o arquivo style.css. Caso contrário, você também pode optar por um editor de CSS personalizado, que não permite que você perca suas alterações após as atualizações do tema. Em seguida, adicione seu código CSS depois de encontrar um seletor correspondente.

3. No back-end do WordPress

Se você deseja incluir ícones diferentes para diferentes títulos de postagem personalizados, tipos de postagem ou widgets, é fácil fazer isso.

Uma dica rápida: crie um shortcode

Para usar Dashicons facilmente, você pode criar um shortcode para ele. É útil, especialmente quando você cria um site para seus clientes, que achariam fácil inserir Dashicons sem mexer nos códigos.

Conclusão

Espero que as coisas estejam bem claras do seu lado em relação aos Dashicons do WordPress. Eles não apenas cobrem a estética do seu site, mas também são fáceis de usar e melhoram a velocidade de carregamento da página.

E você sabe, ‘beleza e inteligência’ é uma combinação rara.

Então, corra, use esses atraentes Dashicons em seu site WordPress!