Deseja adicionar fontes de símbolos ao seu site WordPress? Recentemente, um de nossos leitores perguntou como é a maneira mais fácil de adicionar fontes de símbolos ao seu tema WordPress.
Com fontes de símbolos, você pode adicionar símbolos vetoriais (redimensionáveis ao tamanho) sem diminuir a velocidade do site. Eles são carregados como fontes da web e podem ser projetados com CSS.
Neste artigo, mostraremos o a o como adicionar facilmente fontes de símbolos ao seu layout do WordPress.
O que são fontes simbólicas e por que devo usá-las?
As fontes de símbolos contêm símbolos ou pictogramas em vez de letras e números. Esses ícones podem ser facilmente adicionados ao conteúdo do site e redimensionados usando CSS. Comparado aos símbolos baseados em imagem, os símbolos das fontes são muito mais rápidos, o que contribui para a velocidade geral do seu site WordPress.
As fontes de símbolos podem ser usadas para exibir símbolos usados com freqüência. Por exemplo, você pode usá-los com seu carrinho de compras, botões de , caixas de recursos, concursos de presentes e até mesmo nos menus de navegação do WordPress.
Existem várias fontes de símbolos gratuitas e de código aberto, com centenas de belos símbolos.
De fato, toda instalação do WordPress vem com a fonte gratuita para o ícone Dashicon. Esses símbolos são usados no menu de istração do WordPress e em outras áreas da área de istração do WordPress.
Algumas outras fontes de símbolos populares são:
Para este tutorial, usamos Font Awesome. É a fonte de símbolo livre e de código aberto mais popular do mercado. Usamos o FontAwesome no site WPBeginner, bem como nossos plugins WordPress, como OptinMonster, WPForms, RafflePress, etc.
Este guia aborda três maneiras de adicionar fontes de símbolos no WordPress. Você pode escolher a solução que funciona melhor para você.
Adicione fontes de símbolos no WordPress usando plugins
Se você é iniciante e está apenas tentando adicionar alguns símbolos às suas postagens ou páginas, esse método é para você. Você não precisa alterar nenhum arquivo de tema e poder usar fontes de símbolos em qualquer lugar do site.
Primeiro, instale e ative o plugin Font Awesome WordPress. Para obter mais informações, consulte nosso guia o a o para instalar um plugin do WordPress.
Depois que o plug-in é ativado, o Font Awesome permite compatibilidade com o seu tema. Agora você pode editar qualquer postagem ou página do WordPress e usar um código de cartão de ícone como este:
(nome do ícone = "foguete")
Você pode usar esse código curto com outro texto ou apenas em um bloco de código curto dedicado.
Uma vez adicionado, você pode visualizar sua postagem ou página para ver como será o ícone em um site ativo. É assim que parecia em nossa página de teste.
Você também pode adicionar o código curto ao próprio símbolo da fonte em um bloco de parágrafo usando a configuração do bloco para aumentar o tamanho do símbolo.
À medida que o texto aumenta, pode parecer estranho no editor de texto. Isso ocorre porque o código do cartão no editor de blocos não muda automaticamente para uma fonte de símbolo.
Você precisa clicar no botão Visualizar na sua postagem ou página para ver como é o tamanho do ícone atual.
Você também pode usar o código do cartão de símbolo nas colunas e criar campos de função da seguinte maneira:
2, Use fontes de símbolo com um gerador de páginas WordPress
Os plug-ins de construtores de sites WordPress mais populares oferecem e incorporado ao tipo de símbolo. Dessa forma, você pode usar facilmente as fontes de símbolo nas páginas de destino e em outras áreas do site.
Construtor Beaver
O Beaver Builder é o melhor plugin do WordPress para criadores de páginas no mercado. Você pode criar facilmente layouts de página personalizados do WordPress sem escrever código.
O Beaver Builder contém belos símbolos e módulos prontos para uso que você pode arrastar e soltar em suas postagens e páginas.
Você pode criar grupos de símbolos, adicionar um único símbolo e movê-los para linhas e colunas bem posicionadas. Você também pode escolher suas próprias cores, planos de fundo, distância e molduras sem precisar escrever CSS.
Com o produto Themer do Beaver Builder, você pode até criar layouts totalmente personalizados do WordPress sem escrever nenhum código.
Elementor Pro
Elementor é outro plugin popular para os construtores de sites WordPress. Ele também contém vários elementos que você pode usar com fontes de símbolo, incluindo um elemento de símbolo.
Você pode simplesmente arrastar e soltar um ícone em qualquer lugar e usá-lo com linhas, colunas e tabelas para criar páginas bonitas.
Outros criadores de páginas populares como Divi e Visual Composer também am fontes de símbolos.
3Adicione fontes de símbolos manualmente com código no WordPress
Como mencionado anteriormente, as fontes de símbolo são apenas fontes e podem ser adicionadas ao seu site como qualquer fonte personalizada.
Algumas fontes de símbolos, como B. Font Awesome, estão disponíveis nos servidores CDN na Internet e podem ser conectadas diretamente através do seu tema WordPress.
Você também pode carregar a pasta de fontes inteira em uma pasta no seu tema WordPress e, em seguida, usá-las na sua folha de estilos.
Como usamos o Font Awesome neste tutorial, mostraremos como adicioná-lo usando um dos métodos.
método 1:
Este método manual é relativamente simples.
Primeiro, visite o site Font Awesome e digite seu endereço de e-mail para obter o código incorporado.
Agora verifique na sua caixa de entrada um email com o Font Awesome com seu código de incorporação. Copie esse código e cole-o no arquivo header.php do seu tema WordPress antes do dia.
Seu código de incorporação consiste em uma única linha que pesquisa o diretório Font Awesome diretamente de seus servidores CDN. É assim:
Este método é mais simples, mas pode entrar em conflito com outros plugins.
Uma abordagem melhor seria carregar o JavaScript corretamente no WordPress usando o mecanismo de enfileiramento interno.
Em vez de vincular sua folha de estilos ao modelo de título do seu tema, você pode colar o seguinte código no arquivo features.php do tema ou em um plug-in específico do site.
função wpb_load_fa () {
wp_enqueue_script ('wpb-fa', 'https://use.fontawesome.com/123456abc.js', array (), '1.0.0', verdadeiro);
}
add_action ('wp_enqueue_scripts', 'wpb_load_fa');
método 2:
O segundo método não é o mais fácil, mas você pode hospedar as fontes usando o ícone Font Awesome em seu próprio site.
Primeiro, visite o site Font Awesome para baixar o pacote de fontes no seu computador.
Basta baixar as fontes dos símbolos e descompactar o pacote.
Agora você precisa se conectar à sua hospedagem WordPress usando um cliente FTP e alternar para o diretório de temas do WordPress.
Você deve criar um novo diretório lá e nomeá-lo como a fonte. Em seguida, faça o do conteúdo da pasta de fontes do símbolo para a pasta de fontes no seu servidor de hospedagem.
Agora você pode carregar fontes de símbolos no seu layout do WordPress. Basta adicionar esse código ao arquivo features.php no seu tema ou plug-in específico do site.
função wpb_load_fa () {
wp_enqueue_style ('wpb-fa', get_stylesheet_directory_uri (). '/fonts/css/font-awesome.min.css');
}
add_action ('wp_enqueue_scripts', 'wpb_load_fa');
Você carregou Font Awesome no seu tema WordPress.
Agora vem a parte em que você adiciona símbolos reais ao seu tema, postagens ou páginas do WordPress.
Exibição manual de fontes de símbolos no WordPress
Visite o site Font Awesome para ver a lista completa dos símbolos disponíveis. Clique no ícone que você deseja usar e o nome do ícone aparecerá.
Copie o nome do símbolo e use-o no WordPress da seguinte maneira.
Você pode criar esse símbolo na folha de estilos do seu artigo da seguinte maneira:
.fa-arrow-alt-circle-up {
tamanho da fonte: 50 px;
cor: # FF6600;
}
Você também pode combinar símbolos diferentes e projetá-los ao mesmo tempo. Suponha que você queira exibir uma lista de links com ícones ao lado deles. Você pode envolvê-los em um
Elemento com uma classe específica.
Página inicial
Biblioteca
Aplicações
Configurações
Agora você pode projetá-lo na folha de estilos do seu artigo da seguinte maneira:
.icons-group-item i {
cor: # 333;
tamanho da fonte: 50 px;
}
.icons-group-item i: e o mouse {
Cor: # FF6600
}
Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente fontes de símbolos ao seu tema WordPress. Você também pode ler nosso tutorial sobre como adicionar ícones de imagem com menus de navegação no WordPress.
Se você gostou deste artigo, assine o nosso canal YouTube para assistir a vídeos tutoriais do WordPress. Você também pode encontrar-nos em Twitter y Facebook.
