Estou construindo um diretório de sites que lista milhares de empresas. Cada empresa tem um site externo da empresa e vários sites sociais, como Facebook, Twitter e Instagram. Eu tenho um bom conjunto de ícones quadrados que representam cada um dos sites sociais.
Para o link para o site da empresa, eu tenho um link de texto que diz “visite nosso site”. Isso não parece tão bom quanto os ícones.
Existe um ícone comum ou típico que representa um link para o site de uma empresa?
Resposta
O padrão é coberto nas duas bibliotecas de ícones “principais”.
Este símbolo funcionou bem em meus testes.
Ícones de materiais
FontAwesome
Comentários
- Veja a lista completa de ícones de link externo FontAwesome aqui: fontawesome.com/icons?d=gallery& q = externo . Observe que para a versão atual a partir de 2019, apenas
external-link-square-alteexternal-link-altsão gratuitos. Emboraexternal-linkseja gratuito em um conde ier version.
Resposta
Não sei se um ícone sozinho vai ser claro o suficiente. ..
No GOV.UK, eles removeram todos aqueles ícones pelos 3 seguintes motivos:
- Você nem sempre precisa contar às pessoas sobre links externos
- O ícone é obscuro e ambíguo
- Palavras são mais eficazes
https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/
Comentários
- A conversa é sobre desenvolvedores reclamando sobre o recurso poluindo o código e especulações sobre o que pode o usuário pensa sobre isso, nenhuma evidência sólida. Os motivos também parecem desculpas para remover o recurso.
- É ' verdade que originalmente era um desenvolvedor ' é preocupação, mas se você ler o artigo completamente, ' verá que depois disso se tornou uma diretriz de design não usar mais esses ícones. E é ' também um bom exemplo da boa colaboração entre a equipe de design e os desenvolvedores.
Resposta
Aqui “é um ícone SVG que você pode usar embutido (diretamente no código HTML onde o ícone é necessário).
<svg width="24px" height="24px" viewBox="0 0 24 24" style="cursor:pointer"><g stroke-width="2.1" stroke="#666" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 13.5 17 19.5 5 19.5 5 7.5 11 7.5"></polyline><path d="M14,4.5 L20,4.5 L20,10.5 M20,4.5 L11,13.5"></path></g></svg>
(Emprestado de Quora )
Exemplo: 