Jag bygger en webbplatskatalog som listar tusentals företag. Varje företag har en extern företagswebbplats och flera sociala webbplatser, såsom Facebook, Twitter och Instagram. Jag har en fin uppsättning fyrkantiga ikoner som representerar var och en av de sociala platserna.
För länken till företagets webbplats har jag en textlänk som säger ”besök vår webbplats”. Det ser dock inte lika bra ut som ikonerna.
Finns det en vanlig eller typisk ikon som representerar en länk till företagets webbplats?
Svar
Standarden täcks i de två ”stora” ikonbiblioteken.
Denna symbol har fungerat bra i mina tester.
Materialikoner
FontAwesome
Kommentarer
- Se hela listan över FontAwesome externa länkikoner här: fontawesome.com/icons?d=gallery& q = extern . Observera att endast den aktuella versionen från och med 2019
external-link-square-altochexternal-link-altär gratis. Även omexternal-linkär gratis i en jarl tidigare version.
Svar
Jag vet inte om en ikon ensam kommer att vara tydlig nog. ..
På GOV.UK tog de bort alla dessa ikoner på grund av följande 3 skäl:
- Du behöver inte alltid berätta för andra om externa länkar
- Ikonen är obskur och tvetydig
- Ord är effektivare
https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/
Kommentarer
- Konversationen handlar om att utvecklare klagar över att funktionen förorenar koden och spekulationer om vad som kan användaren tänker på det, inga solida bevis. Anledningarna låter också som ursäkter för att ta bort funktionen.
- Det ' är sant att det ursprungligen var en utvecklare ' oro, men om du läser artikeln noggrant ser du ' att det efteråt blev en riktlinje för design att inte använda dessa ikoner längre. Och det ' är också ett bra exempel på det goda samarbetet mellan designteamet och utvecklarna.
Svar
Här är en SVG -ikon som du kan använda inline (direkt i HTML-kod där ikonen behövs).
<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>
(Lånad från Quora )
Exempel: 