7 Expertentipps zu Web-Symbolen für Nutzung und Vorteile

Fragen Sie sich, ob Sie ein Symbol für Ihre Webseite verwenden und welches auswählen sollen? Diese Expertentipps können Sie vielleicht davon überzeugen, was viele professionelle Webentwickler bereits wissen: Es ist viel einfacher, Symbole aus einem enthaltenen Symbolsatz zu suchen, als Symbole einzeln zu finden und einen Weg zu finden, sie irgendwie konsistent zu machen.

Wir haben die Community nach ihren besten Tipps zur Verwendung von Icon-Sets gefragt, und viele von ihnen stimmen der Verwendung des beliebten Font Awesome-Icon-Sets zu. Dies ist jedoch nicht das einzige auf dem Markt verfügbare Icon-Set.

Welches Icon-Set verwenden Sie? Lass es uns in den Kommentaren wissen!

 Verwenden Sie ein bestimmtes Symbol für Ihre Webseite? Verwenden Sie Font Awesome für eine bestimmte Verwendung (d. H. Mit Shopify für einen Newsletter, ...)? Wenn ja, warum verwenden Sie es und wie sind Ihre Erfahrungen mit dem Symbolsatz? Haben Sie ihr CDN verwendet, haben Sie eine Verbesserung für Ihre Nutzung festgestellt?

Jeff Roscher: Es fügt ein schönes, einfaches Design hinzu, das Kunden modern und ansprechend finden

Wir verwenden Font Awesome bei eWorkOrders.com. Es ist Teil unserer Marketing-Webseite und unseres SAAS-Angebots (Software as a Service), eines computergestützten Wartungsmanagementsystems (CMMS). Auf unserer Marketing-Webseite wird ein schönes, einfaches Design hinzugefügt, das potenzielle Kunden modern und ansprechend finden. Wir haben interessante Rahmen und Mouseover-Ereignisse hinzugefügt, um sie interaktiver und aufregender zu gestalten. Für unsere Kunden werden Font Awesome-Symbole als visueller Hinweis in Eingabefeldern verwendet, um zu identifizieren, welche Art von Daten eingegeben werden sollen, z. B. ein Kalendersymbol in einem Datumsfeld, ein Umschlag in einem E-Mail-Adressfeld oder ein Telefonsymbol in einem Feld für eine Telefonnummer. Sie werden für Funktionstasten wie Bearbeiten, Kopieren und Drucken verwendet.

Die Symbole werden verwendet, um schnelle visuelle Informationen zu den Daten bereitzustellen, z. B. ein rotes Ausrufezeichen neben einem überfälligen Arbeitsauftrag oder wenn etwas beachtet werden muss. Sie befinden sich auch an einigen anderen Orten, um das Programm schöner aussehen zu lassen.

Font Awesome war großartig! Ihr CDN ist schnell und es gibt viele Optionen für jede Art von Symbol, die wir benötigt haben. Wir wurden nie enttäuscht.

Rachel Foley: Eine kostengünstige Möglichkeit, mühelos auf eine umfangreiche Symbolbibliothek zuzugreifen

Bei Karte Meine Kunden verlassen wir uns bei unserer Ikonografie über alle Marketingkanäle und unser Produkt hinweg voll und ganz auf Font Awesome, einschließlich unserer:

• Webseite
• E-Mails
• Sozialen Medien
• Benutzerdefinierte Grafiken
• App
• Web-App

Wir verwenden Font Awesome, weil dies eine kostengünstige Möglichkeit ist, problemlos auf eine umfangreiche Symbolbibliothek zuzugreifen. Der Stil ist eher spielerisch und passt zu unserer Marke. Darüber hinaus gibt uns die Möglichkeit, unterschiedliche Gewichte und Stile von Symbolen zu verwenden, Freiheit.

Wir verwenden das CDN für unsere Anwendungen, was ein sehr konsistentes Gefühl für die Benutzererfahrung des Produkts ermöglicht. Plus - es ist super einfach zu aktualisieren, wenn wir müssen. Mit Marketingmaterialien sind wir etwas flexibler und verwenden eine Mischung aus CDN, unseren lokalen Installations- und Vektorversionen.

FA war für uns immer zuverlässig, seit wir uns im Januar vollständig verabschiedet haben.

Andrew Ruditser: Als Font Awesome aktualisiert wurde, haben wir es auch getan

Font Awesome is used on all our sites since the dawn of time. When we first started working with Font Awesome, it was mainly used for their Sozialen Medien Icons. As Font Awesome upgraded, so did we. Not only are their phone icons fantastic, we enjoy the comical icons that they offer. As of recent, Font Awesome announced their version 6 icons. To us, this shows that Font Awesome cares for their users, and want to keep their system up to date with recent code.

Font Awesome bietet jetzt eine große Auswahl an Symbolen. Diese Flexibilität ist für uns von der Entwurfsphase bis zur Entwicklungsphase hilfreich. Für Font Awesome bietet ihre Plattform zwei Optionen für ihre Benutzer. Die erste Option ist ein kostenloser Dienst, der 1.588 kostenlose Symbole zur Auswahl bietet. Die zweite Option ist eine Pro-Mitgliedschaft mit 7.842 Symbolen. Diese Firma hat auch einen sogenannten Icon-Spickzettel. In dieser Liste werden alle von Font Awesome angebotenen Symbole angezeigt, die uns darüber informieren, ob sie Teil des kostenlosen Pakets oder des Pro-Pakets sind.

Außerdem bietet Font Awesome die Option, den Code aus dem CDN abzurufen. Wir empfehlen dringend, ihren Weg zu gehen. Ihr CDN hat eine schnelle Reaktionszeit und wir haben wenig bis gar keine Verzögerung zwischen unserer Website und ihrer Plattform.

Jeff Romero: Es macht die Geschwindigkeit der Seite viel schneller

Wir entwickeln auf Wordpress benutzerdefinierte Websites für kleine bis mittelständische Geschäftskunden. Wir haben in der Vergangenheit Bilder verwendet, um verschiedene Symbole auf unseren Websites darzustellen, von Social-Media-Profilen bis hin zu Telefon- und E-Mail-Symbolen. Um ein Bild für Symbole zu verwenden, müssen Sie einen konsistenten Satz von Symbolen finden, diese hochladen und anschließend die Größe ändern, um sicherzustellen, dass sie zur Site passen.

Obwohl es sich um eine kleine Bilddatei handelt, ist es ein ziemlicher Prozess, einen konsistenten Satz von Symbolen zu erhalten und sie mit der Vorlage der Site übereinstimmen zu lassen. Mit Font Awesome und dem Wordpress-Plugin können wir jetzt Symbole durch konsistente Medien ersetzen, für die lediglich eine HTML-Zeile kopiert / eingefügt werden muss. Noch besser ist, dass die Größe der Symbole mit einer kleinen Menge CSS (mithilfe der Eigenschaft Schriftgröße) geändert werden kann. Die Symbole werden besser angezeigt als bildbasierte Symbole und sind auf Mobilgeräten deutlich sichtbar. Da es sich eher um eine HTML-Zeile als um eine Bilddatei handelt, wird die Geschwindigkeit der Seite erheblich erhöht.

Vance: Besonders gut, wenn Sie keinen Designer in Ihrem Team haben

Als Webentwickler verwende ich Font Awesome als schnelle Lösung für viele nette Symbole. Abgesehen davon ist Font Awesome besonders gut, wenn Sie keinen Designer in Ihrem Entwicklungsteam haben. Es ist praktisch für die Entwicklung von Wordpress-Plugins, da Entwickler sie mithilfe der CDNs von Font Awesome in kürzester Zeit in ihre Plugins einbetten können.

Meine Erfahrung mit Font Awesome ist bisher gut. Das heißt aber nicht, dass es keine Nachteile hat. Einer der offensichtlichen Nachteile ist die Geschwindigkeit beim Laden der Seite (Leistung). Da es sich um eine schnelle Lösung handelt, müssen Sie eine ganze Reihe von Symbolen einbetten, obwohl Sie nur wenige Symbole verwenden. Dies könnte die Ladegeschwindigkeit der Website und die PSI-Werte (Google Page Speed) verringern.

Sunny Ashley: einfach, sauber und für neue Besucher sofort erkennbar

Wir verwenden Font Awesome-Symbole in unserer Website-Fußzeile. Insbesondere verwenden wir die Facebook-, Twitter- und LinkedIn-Symbole, um auf unsere Social-Media-Kanäle zu verweisen. Sie sind einfach, sauber und für neue Besucher sofort erkennbar. Wie andere Benutzer von Font Awesome wissen, waren sie auch sehr schnell und einfach zu konfigurieren.

Burak Özdemir: Federsymbole verursachen keine übermäßige DOM-Größe

Feather Icons ist eine Sammlung lesbarer, visuell ansprechender Open-Source-Symbole, die von Cole Bemis entworfen und gepflegt wurden. Ab Juni 2020 sind mehr als 280 Symbole verfügbar. Alle von den Feather Icons bereitgestellten Symbole sind MIT-lizenziert und können separat als SVG-Dateien heruntergeladen werden. Sie können die Symbolgröße, die Strichfarbe des Symbols und die Strichbreite auf der Website des Federsymbols anpassen, bevor Sie sie herunterladen.

Federsymbole können eine gute Wahl für Ihre Website oder Ihr Projekt sein, wenn Sie Entwickler sind oder wissen, wie einige grundlegende Front-End-Aufgaben zu erledigen sind. Da diese leichtgewichtigen Symbole auch mit einer modularen JavaScript-Bibliothek gerendert werden können, verursachen sie keine übermäßige DOM-Größe, eine Metrik, die die Leistung Ihrer Webseite beeinträchtigen kann. Mit Feather Icons können Sie die Ladegeschwindigkeit von Seiten im Vergleich zu anderen auf dem Markt erhältlichen Paketen stärker senken. Der einzige Nachteil bei der Verwendung dieses Symbolsatzes ist, dass Sie die meisten Markensymbole nicht finden können.