Estoy creando un directorio de sitios web que enumera miles de empresas. Cada empresa tiene un sitio web externo de la empresa y varios sitios sociales, como Facebook, Twitter e Instagram. Tengo un bonito conjunto de iconos cuadrados que representan cada uno de los sitios sociales.
Para el enlace al sitio web de la empresa, tengo un enlace de texto que dice «visite nuestro sitio web». Sin embargo, no se ve tan bien como los iconos.
¿Existe un icono común o típico que represente un enlace al sitio web de una empresa?
Respuesta
El estándar está cubierto en las dos bibliotecas de iconos «principales».
Este símbolo ha funcionado bien en mis pruebas.
Iconos de material
FontAwesome
Comentarios
- Vea la lista completa de iconos de enlaces externos de FontAwesome aquí: fontawesome.com/icons?d=gallery& q = external . Tenga en cuenta que para la versión actual de 2019, solo
external-link-square-altyexternal-link-altson gratuitos. Aunqueexternal-linkes gratuito en una versión anterior.
Respuesta
No sé si un icono por sí solo será lo suficientemente claro. ..
En GOV.UK eliminaron todos esos íconos por las siguientes 3 razones:
- No siempre es necesario informar a la gente sobre los enlaces externos
- El icono es oscuro y ambiguo
- Las palabras son más eficaces
https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/
Comentarios
- La conversación trata sobre desarrolladores que se quejan de que la característica contamina el código y especulan sobre lo que podría el usuario lo piensa, no hay evidencia sólida. Las razones también parecen excusas para eliminar la función.
- Es ' cierto que originalmente era un desarrollador ' s preocupación, pero si lees el artículo detenidamente, ' verás que después se convirtió en una guía de diseño para no usar más esos íconos. Y ' también es un buen ejemplo de la buena colaboración entre el equipo de diseño y los desarrolladores.
Respuesta
Aquí «hay un icono SVG que puede usar en línea (directamente dentro del código HTML donde se necesita el icono).
<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>
(Tomado de Quora )
Ejemplo: 