Jeg bygger en webstedsmappe, der viser tusindvis af virksomheder. Hver virksomhed har et eksternt firmawebsted og flere sociale websteder, såsom Facebook, Twitter og Instagram. Jeg har et dejligt sæt firkantede ikoner, der repræsenterer hver af de sociale websteder.
For linket til virksomhedens websted har jeg et tekstlink, der siger “besøg vores hjemmeside”. Det ser dog ikke så godt ud som ikonerne.
Er der et almindeligt eller typisk ikon, der repræsenterer et link til en virksomheds websted?
Svar
Standarden er dækket i de to “store” ikonbiblioteker.
Dette symbol har fungeret godt i min testning.
Materielle ikoner
FontAwesome
Kommentarer
- Se den fulde liste over FontAwesome eksterne linkikoner her: fontawesome.com/icons?d=gallery& q = ekstern . Bemærk, at kun den aktuelle version fra og med 2019
external-link-square-altogexternal-link-alter gratis. Selvomexternal-linker gratis i en jarl tidligere version.
Svar
Jeg ved ikke, om et ikon alene vil være klart nok. ..
På GOV.UK fjernede de alle disse ikoner på grund af følgende 3 grunde:
- Du behøver ikke altid fortælle folk om eksterne links
- Ikonet er uklart og tvetydigt
- Ord er mere effektive
https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/
Kommentarer
- Samtalen handler om udviklere, der klager over funktionen, der forurener koden og spekulerer i, hvad der kan være brugeren tænker over det, ingen solide beviser. Årsagerne lyder også som undskyldninger for at fjerne funktionen.
- Det ' er sandt, at det oprindeligt var en udvikler ' bekymring, men hvis du læser artiklen grundigt, vil du ' se, at det bagefter blev en designretningslinje for ikke at bruge disse ikoner længere. Og det ' er også et godt eksempel på det gode samarbejde mellem designteamet og udviklerne.
Svar
Her er et SVG ikon, du kan bruge inline (direkte inden for HTML-kode, hvor ikonet er nødvendigt).
<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ånt fra Quora )
Eksempel: 