7 dicas de especialistas no ícone da Web definem o uso e os benefícios
- Jeff Roscher: acrescenta um estilo simples e agradável que os clientes consideram moderno e atraente
- Rachel Foley: uma maneira acessível de acessar uma enorme biblioteca de ícones com facilidade
- Andrew Ruditser: como o Font Awesome foi atualizado, nós também
- Jeff Romero: torna a velocidade da página muito mais rápida
- Vance: especialmente bom quando você não tem um designer em sua equipe
- Sunny Ashley: simples, limpo e instantaneamente reconhecível para novos visitantes
- Burak Özdemir: Ícones de penas não causam um tamanho DOM excessivo
Você está pensando em usar um conjunto de ícones para o seu site e qual escolher? Essas dicas de especialistas podem convencê-lo sobre o que muitos desenvolvedores profissionais da web já sabem: é muito mais fácil pesquisar ícones em um conjunto de ícones incluído, do que encontrar ícones um por um e encontrar uma maneira de torná-los consistentes de alguma forma.
Pedimos à comunidade as melhores dicas sobre o uso de conjuntos de ícones, e muitos deles concordam em usar o popular conjunto de ícones Font Awesome, mas, no entanto, esse não é o único conjunto de ícones disponível no mercado.
Qual conjunto de ícones você está usando? Deixe-nos saber nos comentários!
Você está usando um conjunto de ícones específico para o seu site? Você está usando o Font Awesome para um uso específico (ou seja, com o Shopify, para um boletim informativo, ...)? Se sim, por que você está usando e qual é a sua experiência com o conjunto de ícones? Você já usou a CDN, notou alguma melhoria no seu uso?Jeff Roscher: acrescenta um estilo simples e agradável que os clientes consideram moderno e atraente
Usamos Font Awesome em eWorkOrders.com. Faz parte do site de marketing e da oferta de software como serviço (SAAS), um sistema de gerenciamento de manutenção informatizado (CMMS). Em nosso site de marketing, ele adiciona um estilo simples e agradável que os clientes em potencial consideram moderno e atraente. Adicionamos fronteiras interessantes e eventos de mouseover para torná-los mais interativos e emocionantes. Para nossos clientes, os ícones Font Awesome são usados como sugestão visual dentro dos campos de entrada para ajudar a identificar que tipo de dados devem ser inseridos, como um ícone de calendário em um campo de data, um envelope em um campo de endereço de email ou um ícone de telefone em um campo para um número de telefone. Eles são usados em botões funcionais, como editar, copiar e imprimir.
Os ícones são usados para fornecer informações visuais rápidas sobre os dados, como um ícone de exclamação vermelho ao lado de uma ordem de serviço em atraso ou quando algo precisa de atenção. Eles também estão em alguns outros lugares apenas para tornar o programa mais agradável.
Font Awesome foi incrível! O CDN é rápido e existem muitas opções para todos os tipos de ícones que precisamos. Nós nunca ficamos desapontados.
Jeff é o presidente do eWorkOrders.com. O eWorkOrders é um CMMS baseado na Web fácil de usar que ajuda os clientes a gerenciar solicitações de serviço, ordens de serviço, ativos, manutenção preventiva e muito mais.
Rachel Foley: uma maneira acessível de acessar uma enorme biblioteca de ícones com facilidade
No Mapear meus clientes, confiamos totalmente no Font Awesome para nossa iconografia em todos os canais de marketing e em nossos produtos, incluindo:
- Local na rede Internet
- Emails
- Mídia social
- Gráficos personalizados
- Aplicativo móvel
- aplicativo web
Usamos o Font Awesome porque é uma maneira acessível de acessar uma enorme biblioteca de ícones com facilidade. O estilo é mais divertido, alinhado com a nossa marca; além disso, a capacidade de utilizar diferentes pesos e estilos de ícones nos dá liberdade.
Usamos o CDN para nossos aplicativos, o que permite uma sensação muito consistente em toda a experiência do usuário do produto. Além disso - é super simples de atualizar quando precisamos. Com os materiais de marketing, somos um pouco mais flexíveis e usamos uma mistura de CDN, nossa instalação local e versões vetoriais.
A FA sempre foi confiável para nós desde que adotamos totalmente em janeiro.
Rachel é uma web designer de Nova York e profissional de marketing de conteúdo com o objetivo de aprimorar as marcas B2B crescentes e obter sucesso de marketing a longo prazo por meio da estratégia de SEO. Atualmente, ela está na Mapear meus clientes, uma empresa de software de vendas B2B que cria soluções para equipes de vendas em campo.
Andrew Ruditser: como o Font Awesome foi atualizado, nós também
Font Awesome is used on all our sites since the dawn of time. When we first started working with Font Awesome, it was mainly used for their Mídia social Icons. As Font Awesome upgraded, so did we. Not only are their phone icons fantastic, we enjoy the comical icons that they offer. As of recent, Font Awesome announced their version 6 icons. To us, this shows that Font Awesome cares for their users, and want to keep their system up to date with recent code.
O Font Awesome agora oferece uma ampla variedade de ícones para você escolher. Consideramos essa flexibilidade útil desde a fase de design até a fase de desenvolvimento. Para o Font Awesome, sua plataforma oferece duas opções para seus usuários. O First Options é um serviço gratuito, que oferece 1.588 ícones gratuitos para você escolher. A segunda opção é uma associação Pro, que oferece 7.842 ícones. Essa empresa também possui o que chamamos de uma folha de dicas sobre ícones. Esta lista exibe todos os ícones que o Font Awesome oferece, que informa se eles fazem parte do pacote gratuito ou do pro.
Para adicionar, o Font Awesome também oferece uma opção para extrair o código da CDN. É altamente recomendável seguir seu caminho. O CDN deles tem um tempo de resposta rápido, e temos pouco ou nenhum “lag” entre o site e a plataforma.
Andrew Ruditser, Coordenador Líder de Tecnologia
Jeff Romero: torna a velocidade da página muito mais rápida
Desenvolvemos sites personalizados no Wordpress para clientes comerciais de pequeno e médio porte. Historicamente, usamos imagens para representar vários ícones em nossos sites, desde perfis de mídia social a ícones de telefone e email. O processo para usar uma imagem para ícones requer encontrar um conjunto consistente de ícones, enviá-los e redimensioná-los para garantir que eles se encaixem no site.
Embora seja um pequeno arquivo de imagem, é um pouco complicado obter um conjunto consistente de ícones e fazer com que eles correspondam ao modelo do site. Agora, usando o Font Awesome e seu plugin Wordpress, podemos substituir ícones por um conjunto consistente de mídias que simplesmente requerem copiar / colar uma linha de HTML. Melhor ainda, os ícones podem ser redimensionados com uma pequena quantidade de CSS (usando a propriedade tamanho da fonte). Os ícones são exibidos melhor do que um ícone baseado em imagem e são claramente visíveis em dispositivos móveis. Finalmente, como é uma linha de HTML e não um arquivo de imagem, torna a velocidade da página muito mais rápida.
Jeff Romero é co-fundador da Octiv Digital, uma agência de marketing digital especializada em estratégia de SEO local e empresarial, gerenciamento de publicidade paga por clique, serviços de design / desenvolvimento de web e análises de marketing.
Vance: especialmente bom quando você não tem um designer em sua equipe
Como desenvolvedor web, uso o Font Awesome como uma solução rápida para muitos ícones legais. Dito isto, o Font Awesome é especialmente bom quando você não tem um designer em sua equipe de desenvolvimento. É útil para o desenvolvimento de plugins do Wordpress, pois os desenvolvedores podem incorporá-los em seus plugins usando as CDNs do Font Awesome em pouco tempo.
Minha experiência com o Font Awesome é boa até agora. Mas isso não significa que não tenha desvantagens. Uma das desvantagens óbvias é a velocidade de carregamento da página (desempenho). Como é uma solução rápida, você deve incorporar todo um conjunto de ícones, mesmo usando apenas alguns. Isso poderia diminuir a velocidade de carregamento do site e as pontuações no Google Page Speed (PSI).
Vance, desenvolvedor da web e proprietário da web.
Sunny Ashley: simples, limpo e instantaneamente reconhecível para novos visitantes
Utilizamos os ícones Font Awesome no rodapé do site. Especificamente, usamos os ícones do Facebook, Twitter e LinkedIn para fazer referência aos nossos canais de mídia social. Eles são simples, limpos e instantaneamente reconhecíveis para novos visitantes. Como outros usuários do Font Awesome sabem, eles também foram muito rápidos e fáceis de configurar.
Sunny Ashley, fundadora e CEO da Autoshopinvoice. O Autoshopinvoice fornece software de gerenciamento de lojas para oficinas e oficinas de reparo de automóveis independentes.
Burak Özdemir: Ícones de penas não causam um tamanho DOM excessivo
O Feather Icons é uma coleção de ícones de código aberto legíveis e visualmente agradáveis, projetados e mantidos por Cole Bemis. Em junho de 2020, existem mais de 280 ícones disponíveis. Todos os ícones fornecidos pelos Ícones Feather são licenciados pelo MIT e podem ser baixados separadamente como arquivos SVG. Você pode personalizar o tamanho do ícone, a cor do traçado e a largura do traçado no site do Feather Icon antes de baixá-los.
O Feather Icons pode ser uma ótima opção para seu site ou projeto, se você é um desenvolvedor ou sabe como lidar com algumas tarefas básicas de front-end. Como esses ícones leves também podem ser renderizados com uma biblioteca JavaScript modular, eles não causam um tamanho DOM excessivo, uma métrica que pode prejudicar o desempenho da página da web. Assim, ao usar o Feather Icons, você pode diminuir a velocidade de carregamento da página mais em comparação com outros pacotes disponíveis no mercado. A única desvantagem de usar este conjunto de ícones é que você não consegue encontrar a maioria dos ícones da marca.
Ícones de penas
Burak Özdemir é um desenvolvedor web da Turquia. Ele é especialista na criação de aplicativos baseados na Web.
Michel Pinson é um entusiasta de viagens e criador de conteúdo. Fusão de paixão pela educação e exploração, ele foi dividido em compartilhar conhecimento e inspirar outras pessoas através do conteúdo educacional cativante. A aproximando o mundo, capacitando indivíduos com experiência global e um sentimento de viajante.
