Tworzę katalog witryn internetowych zawierający listę tysięcy firm. Każda firma ma zewnętrzną witrynę internetową i kilka serwisów społecznościowych, takich jak Facebook, Twitter i Instagram. Mam ładny zestaw kwadratowych ikon reprezentujących każdą z witryn społecznościowych.
W przypadku łącza do witryny internetowej firmy mam łącze tekstowe z napisem „odwiedź naszą witrynę internetową”. Nie wygląda to jednak tak dobrze, jak ikony.
Czy istnieje wspólna lub typowa ikona, która reprezentuje łącze do witryny internetowej firmy?
Odpowiedź
Norma jest objęta w dwóch „głównych” bibliotekach ikon.
Ten symbol dobrze sprawdził się w moich testach.
Ikony materiałów
FontAwesome
Komentarze
- Zobacz pełną listę ikon linków zewnętrznych FontAwesome tutaj: fontawesome.com/icons?d=gallery& q = external . Pamiętaj, że tylko w bieżącej wersji z 2019 r.
external-link-square-altiexternal-link-altsą bezpłatne. Chociażexternal-linkjest bezpłatne na nowsza wersja.
Odpowiedź
Nie wiem, czy sama ikona będzie wystarczająco jasna. ..
W GOV.UK usunęli wszystkie te ikony z trzech następujących powodów:
- Nie zawsze musisz mówić ludziom o linkach zewnętrznych
- Ikona jest niejasna i niejednoznaczna
- Słowa są skuteczniejsze
https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/
Komentarze
- Rozmowa dotyczy programistów narzekających na funkcję zanieczyszczającą kod i spekulacji na temat tego, co może użytkownik myśli o tym, brak solidnych dowodów. Powody również brzmią jak wymówki do usunięcia tej funkcji.
- Prawdą jest, że ' był pierwotnie programistą ' budzi obawę, ale jeśli dokładnie przeczytasz ten artykuł, ' zobaczysz, że później wskazówką projektową stało się zaprzestanie używania tych ikon. ' jest również dobrym przykładem dobrej współpracy między zespołem projektowym a programistami.
Odpowiedź
Oto ikona SVG , której możesz użyć w tekście (bezpośrednio w kodzie HTML, gdzie ikona jest potrzebna).
<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>
(Pożyczony z Quora )
Przykład: 