7 tips van experts over webiconen stellen het gebruik en de voordelen in

Vraagt ​​u zich af of u een pictogrammenset voor uw website wilt gebruiken en welke u moet kiezen? Deze deskundige tips kunnen u misschien overtuigen van wat veel professionele webontwikkelaars al weten: het is veel gemakkelijker om pictogrammen te zoeken in een bijgeleverde pictogrammenset, dan om pictogrammen één voor één te vinden en een manier te vinden om ze op de een of andere manier consistent te maken.

We vroegen de community om hun beste tips voor het gebruik van icon sets, en veel van hen zijn het eens over het gebruik van de populaire Font Awesome icon set, maar dat is niet de enige icon set die op de markt verkrijgbaar is.

Welke icon set gebruikt u? Laat het ons weten in reacties!

 Gebruikt u een specifieke icon set voor uw website? Gebruikt u Font Awesome voor een specifiek gebruik (bijv. Met Shopify, voor een nieuwsbrief, ...)? Zo ja, waarom gebruikt u het en wat is uw ervaring met de icon set? Heb je hun CDN gebruikt, heb je een verbetering opgemerkt voor je gebruik?

Jeff Roscher: het voegt een mooie, eenvoudige styling toe die klanten modern en aantrekkelijk vinden

We gebruiken Font Awesome op eWorkOrders.com. Het maakt deel uit van zowel onze marketingsite als onze software as a service (SAAS) -aanbieding, een geautomatiseerd onderhoudsmanagementsysteem (CMMS). Op onze marketingsite voegt het een mooie, eenvoudige styling toe die potentiële klanten modern en aantrekkelijk vinden. We hebben interessante randen en mouseover-evenementen toegevoegd om ze interactiever en spannender te maken. Voor onze klanten worden Font Awesome-pictogrammen gebruikt als visuele aanwijzing in invoervelden om te helpen bepalen welk type gegevens moeten worden ingevoerd, zoals een kalenderpictogram in een datumveld, een envelop in een e-mailadresveld of een telefoonpictogram in een veld voor een telefoonnummer. Ze worden gebruikt op functionele knoppen, zoals bewerken, kopiëren en afdrukken.

De pictogrammen worden gebruikt om snelle visuele informatie over de gegevens te geven, zoals een rood uitroepteken naast een achterstallige werkorder of wanneer iets aandacht nodig heeft. Ze zijn ook op een paar andere plaatsen om het programma er leuker uit te laten zien.

Font Awesome was geweldig! Hun CDN is snel en er zijn veel opties voor elk ander soort pictogram dat we nodig hebben. We zijn nog nooit teleurgesteld geweest.

Rachel Foley: een betaalbare manier om gemakkelijk toegang te krijgen tot een enorme iconenbibliotheek

Bij Breng mijn klanten in kaart vertrouwen we volledig op Font Awesome voor onze iconografie in alle marketingkanalen en ons product, inclusief ons:

• Website
• E-mails
• Sociale media
• Aangepaste afbeeldingen
• Mobiele app
• web applicatie

We gebruiken Font Awesome omdat het een betaalbare manier is om gemakkelijk toegang te krijgen tot een enorme pictogrammenbibliotheek. De stijl is meer aan de speelse kant die aansluit bij ons merk; Bovendien geeft ons de mogelijkheid om verschillende gewichten en iconenstijlen te gebruiken.

We gebruiken de CDN voor onze toepassingen, wat zorgt voor een zeer consistent gevoel in de gebruikerservaring van het product. Bovendien is het supereenvoudig om te upgraden wanneer dat nodig is. Met marketingmateriaal zijn we wat flexibeler en gebruiken we een mix van CDN, onze lokale installatie- en vectorversies.

FA is altijd betrouwbaar voor ons geweest sinds we in januari volledig zijn geadopteerd.

Andrew Ruditser: zoals Font Awesome geüpgraded, wij ook

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 Sociale media 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 biedt nu een breed scala aan pictogrammen om uit te kiezen. We vinden deze flexibiliteit nuttig voor ons vanaf de ontwerpfase tot onze ontwikkelingsfase. Voor Font Awesome biedt hun platform twee opties voor hun gebruikers. De eerste opties is een gratis service, die 1.588 gratis pictogrammen biedt om uit te kiezen. De tweede optie is een Pro-lidmaatschap, dat 7.842 pictogrammen biedt. Dit bedrijf heeft ook een zogenaamd Icon-spiekbriefje. Deze lijst toont al hun pictogrammen die Font Awesome aanbiedt, die ons informeert of ze deel uitmaken van het gratis pakket of het pro-pakket.

Om toe te voegen, biedt Font Awesome ook een optie om hun code uit hun CDN te halen. We raden je ten zeerste aan om hun route te gaan. Hun CDN heeft een snelle reactietijd en we hebben weinig tot geen 'vertraging' tussen onze site en hun platform.

Jeff Romero: het maakt de snelheid van de pagina veel sneller

Wij ontwikkelen op maat gemaakte websites op Wordpress voor kleine tot middelgrote zakelijke klanten. We hebben historisch gezien afbeeldingen gebruikt om verschillende pictogrammen op onze websites weer te geven, variërend van sociale media-profielen tot telefoon- en e-mailpictogrammen. Het proces om een ​​afbeelding voor pictogrammen te gebruiken, vereist het vinden van een consistente set pictogrammen, ze uploaden en vervolgens het formaat ervan wijzigen om ervoor te zorgen dat ze op de site passen.

Hoewel het een klein afbeeldingsbestand is, is het een beetje een proces om een ​​consistente set pictogrammen te krijgen en deze overeen te laten komen met de sjabloon van de site. Nu kunnen we, met behulp van Font Awesome en de Wordpress-plug-in, pictogrammen vervangen door een consistente set media waarvoor eenvoudigweg een regel HTML moet worden gekopieerd / geplakt. Beter nog, de pictogrammen kunnen worden verkleind met een kleine hoeveelheid CSS (met behulp van de eigenschap font-size). De pictogrammen worden beter weergegeven dan een op afbeeldingen gebaseerd pictogram en ze zijn duidelijk zichtbaar op mobiele apparaten. Omdat het tenslotte een HTML-regel is in plaats van een afbeeldingsbestand, wordt de pagina veel sneller.

Vance: vooral goed als je geen designer in je team hebt

Als webontwikkelaar gebruik ik Font Awesome als snelle oplossing voor tal van leuke iconen. Dat gezegd hebbende, Font Awesome is vooral goed als je geen designer in je ontwikkelteam hebt. Het is handig voor het ontwikkelen van Wordpress-plug-ins omdat ontwikkelaars ze in een mum van tijd in hun plug-ins kunnen opnemen met behulp van de CDN's van Font Awesome.

Mijn ervaring met Font Awesome is tot nu toe goed. Maar dat betekent niet dat het geen nadelen heeft. Een van de voor de hand liggende nadelen is de laadsnelheid van de pagina (prestaties). Omdat het een snelle oplossing is, moet je een hele reeks pictogrammen insluiten, ook al gebruik je maar een paar pictogrammen. Dat kan de laadsnelheid van de website en de Google Page Speed ​​(PSI) -scores verlagen.

Sunny Ashley: eenvoudig, schoon en direct herkenbaar voor nieuwe bezoekers

We gebruiken Font Awesome-pictogrammen in de voettekst van onze website. We gebruiken met name de pictogrammen Facebook, Twitter en LinkedIn om naar onze socialemediakanalen te verwijzen. Ze zijn eenvoudig, schoon en direct herkenbaar voor nieuwe bezoekers. Zoals andere gebruikers van Font Awesome weten, waren ze ook erg snel en eenvoudig te configureren.

Burak Özdemir: Feather Icons veroorzaken geen buitensporige DOM-grootte

Feather Icons is een verzameling leesbare, visueel aantrekkelijke open-sourcepictogrammen ontworpen en onderhouden door Cole Bemis. Vanaf juni 2020 zijn er meer dan 280 pictogrammen beschikbaar. Alle pictogrammen van de Feather Icons hebben een MIT-licentie en kunnen afzonderlijk worden gedownload als SVG-bestanden. U kunt de pictogramgrootte, de lijnkleur van het pictogram en de lijnbreedte aanpassen op de website van het Feather Icon voordat u ze downloadt.

Feather Icons kan een goede keuze zijn voor uw website of project als u een ontwikkelaar bent of weet hoe u een aantal basale front-end-taken moet uitvoeren. Omdat deze lichtgewicht pictogrammen ook kunnen worden weergegeven met een modulaire JavaScript-bibliotheek, veroorzaken ze geen buitensporige DOM-grootte, een statistiek die de prestaties van uw webpagina kan schaden. Met Feather Icons kunt u dus de laadsnelheid van pagina's meer verlagen in vergelijking met andere pakketten die op de markt verkrijgbaar zijn. Het enige nadeel van het gebruik van deze icon set is dat je de meeste merkiconen niet kunt vinden.