Onde Encontrar Fontes de \u00cdcones<\/h2>\n
Agora h\u00e1 muitos lugares excelentes para encontrar fontes de \u00edcones para o seu site WordPress. Basta digitar “fonte de \u00edcone” no Google para obter alguns resultados excelentes. Uma das mais populares e amplamente utilizadas \u00e9 a Font Awesome<\/a>. A partir do momento em que foi escrito, tem mais de 1.400 \u00edcones livres, assim como mais de 4.500 \u00edcones na sua vers\u00e3o profissional. Inclui \u00edcones para quase tudo, desde interface, at\u00e9 social, setas, e muitos outros tipos de \u00edcones.<\/p>\n Aqui est\u00e3o mais alguns para verificar:<\/p>\n Primeiro vamos mergulhar em algumas das formas r\u00e1pidas e f\u00e1ceis de usar os \u00edcones das fontes do WordPress. Aviso justo, nem todos estes s\u00e3o os melhores em termos de desempenho. Para isso, recomendamos saltar para a se\u00e7\u00e3o sobre o melhor m\u00e9todo<\/a>.<\/p>\n A maneira mais r\u00e1pida de se p\u00f4r a funcionar com \u00edcones de fonte WordPress \u00e9 simplesmente usar um plugin de terceiros. O plugin gratuito Font Awesome Integration<\/a> cont\u00e9m a mais recente biblioteca de \u00edcones do Font Awesome 5. Depois de instalar e activ\u00e1-lo, basta um simples c\u00f3digo de atalho para inserir um \u00edcone. Eles agora at\u00e9 t\u00eam um \u00edcone WordPress! Bastante fixe.<\/p>\n Voc\u00ea pode conferir o gr\u00e1fico de uso b\u00e1sico<\/a> do Font Awesome 5 para formas adicionais de us\u00e1-lo e personaliz\u00e1-lo, bem como sua biblioteca de \u00edcones. Por exemplo, abaixo inserimos o \u00edcone da Fonte Awesome do WordPress num bloco de atalhos do Gutenberg<\/a> e adicion\u00e1mos Aqui est\u00e1 o que parece na parte da frente. Bastante f\u00e1cil, certo? T\u00ednhamos um \u00edcone de Font Awesome a funcionar no nosso site em apenas alguns minutos.<\/p>\n Se voc\u00ea deseja muito c\u00f3digos de acesso f\u00e1ceis de usar, tamb\u00e9m pode consultar o plugin Shortcodes Ultimate<\/a>. Eles t\u00eam um complemento de \u00edcones premium que voc\u00ea pode usar.<\/p>\n O acima \u00e9 uma \u00f3tima solu\u00e7\u00e3o se voc\u00ea quiser deixar seus clientes adicionarem \u00edcones a posts ou p\u00e1ginas, mas se voc\u00ea quiser usar esses elementos dentro do seu tema ou plugin, o melhor \u00e9 voc\u00ea mesmo inquiri-los (mergulhar\u00e1 nisto mais abaixo).<\/p>\n Dashicons<\/a> \u00e9 um conjunto de \u00edcones de fontes inclu\u00eddo por padr\u00e3o, uma vez que o WordPress o usa no backend. Voc\u00ea precisar\u00e1 perguntar no front-end, mas tudo que voc\u00ea precisa \u00e9 o nome do script, o arquivo j\u00e1 est\u00e1 dispon\u00edvel para o WordPress.<\/p>\n Voc\u00ea pode adicionar o seguinte ao seu arquivo Voc\u00ea pode ent\u00e3o ir ao site do Dashicons<\/a>, selecionar um \u00edcone e clicar no link “copy HTML” que lhe dar\u00e1 o c\u00f3digo necess\u00e1rio para exibir o \u00edcone. Eles n\u00e3o t\u00eam uma sele\u00e7\u00e3o enorme, mas ainda assim trabalham muito bem e s\u00e3o muito leves.<\/p>\n Por exemplo, abaixo inserimos o \u00edcone do tablier num bloco HTML do Gutenberg<\/a>.<\/p>\n Aqui est\u00e1 o que parece na parte da frente.<\/p>\n Dashicons n\u00e3o tem nenhum atalho legal com ele fora da caixa, mas voc\u00ea pode personalizar o tamanho dos seus \u00edcones com CSS<\/a>. Aqui est\u00e1 um exemplo de inser\u00e7\u00e3o de um \u00edcone mesmo antes de um cabe\u00e7alho.<\/p>\n A sua terceira op\u00e7\u00e3o \u00e9 ligar-se manualmente a fontes de \u00edcones hospedados externamente. Isto \u00e9 essencialmente o que o plugin da op\u00e7\u00e3o 1 acima est\u00e1 a fazer nos bastidores.<\/p>\n Para o Font Awesome, voc\u00ea pode pegar o c\u00f3digo da p\u00e1gina inicial<\/a> deles e ent\u00e3o seguir os passos abaixo. Eles hospedam todas as suas fontes em um CDN<\/a> de gra\u00e7a para voc\u00ea. Vai parecer algo parecido com isto:<\/p>\n Passo 1<\/strong><\/p>\n Copie o c\u00f3digo para a Passo 2<\/strong><\/p>\n Voc\u00ea pode ent\u00e3o come\u00e7ar a colocar \u00edcones no seu HTML’s Embora n\u00e3o haja nada de errado em usar uma das maneiras acima para adicionar fontes de \u00edcones ao seu site, elas n\u00e3o s\u00e3o tecnicamente a melhor maneira. Porqu\u00ea? Tudo se resume a quest\u00f5es de desempenho<\/strong>.<\/p>\n Primeiro, quando voc\u00ea usa um plugin para fontes de \u00edcones ou um link para uma biblioteca de fontes de \u00edcones externos, ele vai carregar todos os \u00edcones de toda a sua biblioteca. Se voc\u00ea estiver usando apenas cerca de 20 \u00edcones em todo o seu site, isso pode ser tratado de uma maneira muito melhor.<\/p>\n\n Por exemplo, inclu\u00edmos a biblioteca Font Awesome 5 em nosso site e enquanto o arquivo CSS para ele \u00e9 pequeno, o arquivo da fonte em si \u00e9 de 108 KB. Embora isto possa n\u00e3o parecer t\u00e3o grande, voc\u00ea ver\u00e1 mais abaixo como o arquivo fica pequeno quando escolhemos apenas as HTML fontes<\/a> que realmente estamos usando.<\/p>\n Em segundo lugar, n\u00e3o h\u00e1 nada de errado em carregar scripts de diferentes CDNs. No entanto, se voc\u00ea tiver a op\u00e7\u00e3o de carreg\u00e1-lo a partir de um CDN, isso geralmente \u00e9 mais r\u00e1pido. Porqu\u00ea? Porque pode tirar partido de uma \u00fanica liga\u00e7\u00e3o HTTP\/2<\/a> e reduzir a procura adicional de DNS<\/a>. Apenas certifique-se que o seu CDN principal \u00e9 um bom CDN!<\/p>\n Por causa das raz\u00f5es de desempenho mencionadas acima, n\u00f3s vamos lhe mostrar como hospedar suas fontes de \u00edcones localmente, al\u00e9m de usar apenas aquelas que voc\u00ea precisa. Por local entendemos carreg\u00e1-los a partir do servidor do seu servidor WordPress ou do seu pr\u00f3prio CDN.<\/p>\n Ao escolher apenas as fontes de \u00edcones que voc\u00ea precisa, isso pode reduzir o tamanho do arquivo de 100 KB para um par de kilobytes<\/strong>, muito \u00fatil! Melhor ainda: voc\u00ea pode at\u00e9 mesmo misturar e combinar \u00edcones de v\u00e1rios conjuntos de fontes.<\/p>\n Usar um \u00edcone de fonte envolve hospedar o arquivo de fonte (WOFF, WOFF 2, etc.) no seu servidor web, depois usar CSS<\/a> para carregar a face da fonte, depois criar alguma marca\u00e7\u00e3o para adicionar os \u00edcones no lugar correto.<\/p>\n Enquanto seu site carregar\u00e1 um \u00fanico arquivo, voc\u00ea acabar\u00e1 tendo um n\u00famero de formatos de arquivo para cada fonte, j\u00e1 que alguns navegadores utilizam formatos diferentes. O Font Awesome tem 6 formatos de arquivo diferentes inclu\u00eddos: EOT, SVG, TTF, WOFF, WOFF 2 e OTF. No entanto, com base no suporte do navegador, voc\u00ea realmente s\u00f3 precisa de WOFF ou WOFF 2.<\/p>\n Dica: WOFF \u00e9 suportado<\/a> por 93%+ de todos os navegadores modernos. No entanto, WOFF 2 \u00e9 mais comprimido, mas s\u00f3 \u00e9 suportado<\/a> por 83%+ de todos os navegadores modernos. Recomendamos a escolha de um ou outro ou ambos. O navegador ir\u00e1 determinar com base no seu c\u00f3digo qual entregar ao cliente.<\/p>\n Sua primeira tarefa \u00e9 usar uma ferramenta para escolher apenas os \u00edcones que voc\u00ea deseja. Voc\u00ea pode ent\u00e3o adicionar esses arquivos ao diret\u00f3rio do seu projeto em algum lugar, normalmente em um diret\u00f3rio de fontes.<\/p>\n Em seguida, voc\u00ea adiciona o arquivo CSS Font Awesome ao seu projeto e o adiciona ao seu site usando um elemento de link antigo regular.<\/p>\n Voc\u00ea tamb\u00e9m pode consultar o arquivo CSS ou, se ele for pequeno, simplesmente us\u00e1-lo em linha.<\/p>\n Se voc\u00ea olhar para o arquivo CSS, voc\u00ea pode ver o que est\u00e1 acontecendo em segundo plano. Os arquivos de fonte s\u00e3o carregados, o elemento b\u00e1sico com a classe A \u00fanica coisa que voc\u00ea precisa estar atento \u00e9 o caminho para seus arquivos de fontes. Por padr\u00e3o, eles s\u00e3o carregados a partir de Agora que voc\u00ea tem uma id\u00e9ia melhor de como funciona, n\u00f3s vamos adicionar o passo-a-passo de como faz\u00ea-lo. Neste exemplo, estamos a utilizar um site de com\u00e9rcio eletr\u00f4nico de produ\u00e7\u00e3o.<\/p>\n Primeiro, voc\u00ea deve determinar qual biblioteca de \u00edcones de fontes voc\u00ea quer usar. No in\u00edcio deste artigo, compartilhamos alguns que gostamos. Neste exemplo, vamos usar a fonte Font Awesome juntamente com o gerador de fontes IcoMoon<\/a>. Se voc\u00ea quer os arquivos WOFF 2 da IcoMoon, voc\u00ea tem que pagar uma taxa \u00fanica de US$ 9,00 para acessar sua biblioteca premium.<\/p>\n Voc\u00ea pode baixar os \u00edcones Font Awesome que voc\u00ea quer manualmente de gra\u00e7a, mas voc\u00ea precisaria usar uma ferramenta como FontForge<\/a> para editar manualmente seu arquivo WOFF ou WOFF 2. Somos todos f\u00e1ceis, por isso estamos a usar um gerador.<\/p>\n Vai para o gerador IcoMoon<\/a>. Clicamos em “Adicionar” na biblioteca da Font Awesome.<\/p>\n A seguir, voc\u00ea vai querer escolher os \u00edcones que deseja usar no seu site WordPress. Se voc\u00ea j\u00e1 est\u00e1 usando a fonte Font Awesome e est\u00e1 simplesmente mudando para vers\u00f5es hospedadas localmente, fa\u00e7a uma pequena lista e depois escolha-as na biblioteca.<\/p>\n Neste exemplo, estamos escolhendo \u00edcones para perfmatters.io<\/a>, um site de com\u00e9rcio eletr\u00f4nico WordPress que roda Easy Digital Downloads.<\/p>\n Depois de escolher todos os seus \u00edcones, escolha “Generate Font” na parte inferior. Para este site, acab\u00e1mos por precisar de 20 \u00edcones.<\/p>\n Voc\u00ea vai acabar com arquivos que se parecem com isto. O importante \u00e9 o arquivo A seguir, \u00e9 recomendado que voc\u00ea fa\u00e7a um find and replace no Para aqueles que j\u00e1 utilizam a Fonte Awesome, isto simplesmente facilita a mudan\u00e7a das classes para as Font Awesome, desta forma, se j\u00e1 havia algo codificado no seu site WordPress com ele, ele come\u00e7ar\u00e1 automaticamente a utilizar os \u00edcones.<\/p>\n Ent\u00e3o fa\u00e7a um Find para “\u00edcone” e substitua todas as ocorr\u00eancias por “fa”. Voc\u00ea deve ser capaz de fazer uma busca r\u00e1pida e substituir por um editor de texto como o Sublime<\/a>.<\/p>\n Isto substitui Voc\u00ea tamb\u00e9m pode precisar alterar a URL de origem com base no local onde voc\u00ea carrega seus arquivos de fonte no Passo 7. Recomendamos mudar a URL para o seu CDN.<\/strong><\/p>\n A seguir, voc\u00ea precisa adicionar o CSS ao seu site. H\u00e1 algumas maneiras de voc\u00ea fazer isso.<\/p>\n Op\u00e7\u00e3o 1<\/strong><\/p>\n Como a quantidade de CSS \u00e9 muito pequena, voc\u00ea poderia copiar todo o CSS do arquivo e col\u00e1-lo no WordPress Customizer. Nunca fa\u00e7a isso para arquivos grandes, mas esta \u00e9 uma quantidade relativamente pequena de CSS. Isto significa que ser\u00e1 carregado em linha no seu site.<\/p>\n Op\u00e7\u00e3o 2<\/strong><\/p>\n Voc\u00ea pode fazer um link manualmente para a sua folha de estilo, colocando-a no cabe\u00e7alho do seu site WordPress. Dica: Ligue-se a ele em seu pr\u00f3prio CDN para um desempenho mais r\u00e1pido.<\/p>\n Op\u00e7\u00e3o 3<\/strong><\/p>\n Voc\u00ea tamb\u00e9m pode consultar o arquivo CSS no WordPress. O processo \u00e9 muito semelhante \u00e0 forma manual. Adicione o seguinte ao arquivo Agora que voc\u00ea tem o CSS adicionado ao seu site, \u00e9 hora de carregar os arquivos de fontes. Voc\u00ea pode colocar as fontes em qualquer lugar, uma pasta chamada “fontes” no seu \/public diretamente est\u00e1 bem. Lembre-se, no entanto, que a pasta de origem no seu arquivo Agora o seu site WordPress deve ter seus arquivos CSS e fontes acess\u00edveis. Ent\u00e3o, a seguir, voc\u00ea pode adicionar alguma marca\u00e7\u00e3o ao seu site. Este \u00e9 apenas um exemplo de como adicionar um \u00edcone de engrenagem.<\/p>\n Voc\u00ea pode ver um exemplo ao vivo disso funcionando na perfmatters.io<\/a>. Tenha em mente que voc\u00ea pode usar qualquer elemento, n\u00e3o apenas A verdadeira diferen\u00e7a \u00e9 quando voc\u00ea d\u00e1 uma olhada na diferen\u00e7a de tamanho. Lembre-se, quando fizemos a liga\u00e7\u00e3o \u00e0 biblioteca externa Font Awesome, o tamanho total do ficheiro da fonte era 108 KB. Depois que usamos um gerador de fontes e escolhemos apenas os \u00edcones Font Awesome que precis\u00e1vamos para o site, ele reduziu o arquivo de fontes para 2.6 KB. O nosso arquivo de fontes diminuiu em 97,59%!<\/strong><\/p>\n N\u00e3o s\u00f3 isso, mas agora tamb\u00e9m carrega a partir do nosso CDN, o que significa que n\u00e3o existem pesquisas adicionais de DNS <\/strong>para o fontawesome.com.<\/p>\n\n Voc\u00ea tamb\u00e9m pode usar esta mesma abordagem com \u00edcones SVG, \u00e9 apenas ligeiramente diferente.<\/p>\n Uma desvantagem das fontes de \u00edcones \u00e9 a sua horr\u00edvel acessibilidade<\/a>. Os leitores de tela podem ignor\u00e1-los, ou pior ainda, ler o unic\u00f3digo ou o pr\u00f3prio personagem. Isso resultaria em pessoas com defici\u00eancia visual ouvindo “estrelas amarelas favoritas” ao olhar para o seu item de menu favorito – n\u00e3o \u00e9 o ideal. Voc\u00ea tamb\u00e9m deve levar em conta o que acontece se as fontes n\u00e3o forem carregadas.<\/p>\n Idealmente, voc\u00ea gostaria que os \u00edcones decorativos simplesmente desaparecessem quando n\u00e3o estivessem carregados e que os \u00edcones cr\u00edticos fossem substitu\u00eddos por texto se houvesse um problema.<\/p>\n A quest\u00e3o da acessibilidade \u00e9 bastante f\u00e1cil de tratar, basta usar o par\u00e2metro Em uma implementa\u00e7\u00e3o mais completa, voc\u00ea tamb\u00e9m pode usar o Modernizr para testar o suporte \u00e0 fonte. Voc\u00ea precisar\u00e1 modificar ligeiramente o CSS, veja o excelente artigo Bulletproof Font Icons<\/a> para obter informa\u00e7\u00f5es mais detalhadas.<\/p>\n Para obter informa\u00e7\u00f5es sobre a cria\u00e7\u00e3o de \u00edcones cr\u00edticos com texto fallback, tamb\u00e9m recomendamos a leitura do artigo acima, eles explicaram e resolveram o problema da melhor forma poss\u00edvel, mas implement\u00e1-lo est\u00e1 um pouco fora do escopo deste artigo.<\/p>\n Isso \u00e9 tudo o que h\u00e1 para iconizar as fontes. Agora voc\u00ea conhece algumas maneiras diferentes de obter facilmente fontes de \u00edcones no seu site WordPress, ao longo da melhor maneira de implement\u00e1-las quando se trata de desempenho.<\/p>\n![\"\u00cdcones](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/font-fantasticos-icons.png\"){kind=icon}
\n
Maneiras r\u00e1pidas e f\u00e1ceis de usar os \u00edcones da fonte WordPress<\/h2>\n
Op\u00e7\u00e3o 1 – Usar um Plugin WordPress<\/h3>\n
fa-3x<\/code> para o tornar tr\u00eas vezes maior.<\/p>\n[fawesome iclass=\"fab fa-wordpress fa-3x\"]<\/code><\/pre>\n![\"Font](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/gutenberg-fonte-fantastico-shortcode.png\")
![\"Exemplo](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/fonte-fantastica-wordpress-5.0.png\")
Op\u00e7\u00e3o 2 – Usar os Dashicons Embutidos<\/h3>\n
functions.php<\/code>, ou recomendamos o uso de um plugin gratuito como o Code Snippets<\/a>. Isto minimiza o risco de quebra do seu tema e as mudan\u00e7as tamb\u00e9m ser\u00e3o persistentes durante as atualiza\u00e7\u00f5es do tema.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'dashicons' );\n}<\/code><\/pre>\n<span class=\"dashicons dashicons-admin-post\"><\/span><\/code><\/pre>\n![\"Dashicons](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/gutenberg-dashicons.png\")
![\"Exemplo](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/dashicons-wordpress.png\")
<h2 class=\"dashicons-before dashicons-smiley\">My Cool Headline<\/h2><\/code><\/pre>\nOp\u00e7\u00e3o 3 – Link Manual para Fontes de \u00cdcones Hospedados Externamente<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.5.0\/css\/all.css\" integrity=\"sha384-xxxxx\" crossorigin=\"anonymous\"><\/code><\/pre>\n<head><\/code> de cada modelo ou p\u00e1gina do seu site WordPress onde voc\u00ea quer usar a fonte Font Awesome. Voc\u00ea pode editar o arquivo header.php<\/code> do seu tema ou melhor ainda, siga nosso simples tutorial sobre como adicionar c\u00f3digo ao seu cabe\u00e7alho<\/a>.<\/p>\n<body><\/code>. Encontre o \u00edcone certo<\/a> e aprenda como adicion\u00e1-lo \u00e0 sua p\u00e1gina<\/a>.<\/p>\nProblema de Desempenho a Considerar com o Uso de Fontes de \u00cdcones<\/h2>\n
Provavelmente n\u00e3o precisas de todos esses \u00edcones.<\/h3>\n
![\"Grande](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/grande-fontes-biblioteca-library.png\")
Carregar de um CDN \u00e9 normalmente mais r\u00e1pido<\/h3>\n
Hospedar fontes de \u00edcones localmente (Somente os que voc\u00ea precisa)<\/h2>\n
O Fundamento – Como Funciona<\/h3>\n
<link rel=\"stylesheet\" href=\"css\/font-awesome.min.css\"><\/code><\/pre>\n.fa<\/code> \u00e9 definido (junto com alguns outros), e finalmente, cada \u00edcone nomeado \u00e9 definido (por exemplo: .fa-book).<\/p>\n.. \/fonts<\/code> que ser\u00e1 o diret\u00f3rio de fontes, uma pasta acima do arquivo CSS atual. Voc\u00ea pode precisar mudar isso para se adequar \u00e0 sua pr\u00f3pria estrutura de diret\u00f3rios.<\/p>\nPasso 1<\/h3>\n
Passo 2<\/h3>\n
![\"IcoMoon](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/icomoon-font-awesome-library.png\")
Passo 3<\/h3>\n
![\"Escolha](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/escolha-font-awesome-icones-1.png\")
Passo 4<\/h3>\n
![\"Font](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/font-awesome-icons-icomoon-export.png\"){kind=icon}
style.css<\/code> e os arquivos de fontes (WOFF, WOFF 2).<\/p>\n![\"Arquivos](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/fontes-icones.png\")
Passo 5<\/h3>\n
style.css<\/code> antes de fazer o upload\/copy no seu site. Aqui est\u00e1 o aspecto do original.<\/p>\n![\"Arquivo](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/icomoon-css-arquivo.png\")
![\"Encontrar](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/encontrar-substituir-sublime.png\")
[class^=\"icon-\"], [class*=\" icon-\"]<\/code> por [class^=\"fa-\"]<\/code>, [class*=\" fa-\"]<\/code>. Ele tamb\u00e9m corrige cada \u00edcone, assim, em vez de come\u00e7ar com .icone-<\/code>, eles agora come\u00e7am com .fa-<\/code>.<\/p>\nPasso 6<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.yourdomain.com\/fonts\/style.css\"><\/code><\/pre>\nfunctions.php<\/code> do seu tema ou utilize o plugin gratuito Code Snippets<\/a>. Voc\u00ea pode precisar mudar o diret\u00f3rio com base no local onde voc\u00ea o carrega.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '\/css\/style.css' );\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_styles' );<\/code><\/pre>\nPasso 7<\/h3>\n
style.css<\/code> precisa corresponder.<\/p>\n![\"Arquivos](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/icones-fontes-arquivos-sftp.png\")
Passo 8<\/h3>\n
<i class=\"fa fa-cog\"><\/i><\/code><\/pre>\ni<\/code>. Voc\u00ea pode usar elementos de span<\/code> regular tamb\u00e9m, al\u00e9m de adicionar CSS \u00e0s suas classes personalizadas.<\/p>\n![\"Font](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/font-awesome-exemple-perfmatters.png\")
![\"Tamanho](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2015\/10\/tamanho-da-woff2-fonte-ficheiro-incrivel.png\")
\u00cdcones Preocupa\u00e7\u00f5es com a Acessibilidade das Fontes<\/h2>\n
aria-hidden=\"true\"<\/code> e valor para indicar aos leitores de tela que eles devem descartar nosso elemento.<\/p>\n<span class=\"icon icon-star\" aria-hidden=\"true\"><\/span> My Favourites<\/code><\/pre>\nResumo<\/h2>\n