7 consells experts sobre icones de la web estableixen l’ús i els avantatges

Us pregunteu sobre com utilitzar un conjunt d’icones per al vostre lloc web i quina escollir? Aquests consells experts només poden convèncer-vos sobre el que ja saben molts desenvolupadors web professionals: és molt més fàcil cercar icones des d’un conjunt d’icones inclòs, que trobar icones una per una i trobar la manera de fer-les coherents d’alguna manera coherents.

Vam demanar a la comunitat els seus millors consells sobre com utilitzar conjunts d’icones i molts d’ells estan d’acord en utilitzar el popular conjunt d’icones Font Awesome, però no és l’únic conjunt d’icones disponible al mercat.

Quin conjunt d’icones utilitzeu? Feu-nos-ho saber als comentaris!

 Feu servir un conjunt d'icones específic per al vostre lloc web? Feu servir Font Awesome per a un ús específic (és a dir, amb Shopify, per a un butlletí informatiu, ...)? Si és així, per què l’utilitzeu i quina és la vostra experiència amb el conjunt d’icones? Heu utilitzat el seu CDN, heu notat alguna millora pel vostre ús?

Jeff Roscher: afegeix un estil senzill i agradable que els clients troben modern i atractiu

Utilitzem Font Awesome a eWorkOrders.com. Forma part del nostre lloc de màrqueting i del nostre programari com a servei (SAAS) que ofereix un sistema informatitzat de gestió del manteniment (CMMS). Al nostre lloc de màrqueting, afegeix un estil senzill i agradable que els clients potencials troben moderns i atractius. Hem afegit interessants símptomes i esdeveniments de ratolí per fer-los més interactius i emocionants. Pels nostres clients, les icones de Font Awesome s’utilitzen com a visual visual dins dels camps d’entrada per ajudar a identificar quin tipus de dades s’han d’introduir, com una icona de calendari en un camp de data, un sobre d’un camp d’adreça de correu electrònic o una icona de telèfon en un camp per a un número de telèfon. S'utilitzen en botons funcionals, com ara editar, copiar i imprimir.

Les icones s’utilitzen per obtenir informació visual ràpida sobre les dades com una icona d’exclamació vermella al costat d’una ordre de treball retardada o quan alguna cosa necessita atenció. Es troben en uns altres llocs i també per fer que el programa quedi més agradable.

La font impressionant ha estat fantàstica. El seu CDN és ràpid i hi ha moltes opcions per a cada tipus de icona que necessitem. Mai no ens ha decebut.

Jeff és el president de eWorkOrders.com. eWorkOrders és un CMMS basat en web fàcil d’utilitzar que ajuda els clients a gestionar les sol·licituds de servei, les comandes de treball, els actius, el manteniment preventiu i molt més.
Jeff és el president de eWorkOrders.com. eWorkOrders és un CMMS basat en web fàcil d’utilitzar que ajuda els clients a gestionar les sol·licituds de servei, les comandes de treball, els actius, el manteniment preventiu i molt més.

Rachel Foley: una manera assequible d’accedir a una biblioteca d’icones massiva amb facilitat

A Map My Clients, confiem plenament en Font Awesome per a la nostra iconografia a tots els canals de màrqueting i al nostre producte, inclòs el nostre:

  • Lloc web
  • Els correus electrònics
  • Mitjans de comunicació social
  • Gràfics personalitzats
  • Aplicació mòbil
  • Aplicació web

Utilitzem Font Awesome perquè és una manera assequible d’accedir a una biblioteca d’icones massiva amb facilitat. L’estil és més del joc lúdic que s’alinea amb la nostra marca; a més, la capacitat per fer servir diferents pesos i estils d’icones ens proporciona llibertat.

Utilitzem el CDN per a les nostres aplicacions que permet una sensació molt consistent a tota l'experiència de l'usuari del producte. A més, és molt senzill actualitzar-lo quan ho necessitem. Amb els materials de màrqueting, som una mica més flexibles i utilitzem una combinació de CDN, les nostres versions d’instal·lació local i vectorial.

La FA sempre ha estat fiable per a nosaltres des que vam adoptar-la plenament al gener.

Rachel és una dissenyadora web i professional de màrqueting de continguts basada a Nova York, amb un impuls per millorar les marques B2B creixents i crear un èxit de màrqueting a llarg termini mitjançant estratègia de SEO. Actualment és a Situa els meus clients, una empresa de programari de vendes B2B que crea solucions per a equips de vendes de camp.
Rachel és una dissenyadora web i professional de màrqueting de continguts basada a Nova York, amb un impuls per millorar les marques B2B creixents i crear un èxit de màrqueting a llarg termini mitjançant estratègia de SEO. Actualment és a Situa els meus clients, una empresa de programari de vendes B2B que crea solucions per a equips de vendes de camp.

Andrew Ruditser: a mesura que es va actualitzar Font Awesome, també ho vam fer nosaltres

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 Mitjans de comunicació social 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 ara ofereix una àmplia gamma d'icones per triar. Trobem que aquesta flexibilitat ens és útil des de la fase de disseny fins a la fase de desenvolupament. Per a Font Awesome, la seva plataforma ofereix dues opcions per als seus usuaris. Les Primeres Opcions és un servei gratuït, que ofereix 1.588 icones gratuïtes per triar. La segona opció és una pertinença Pro, que ofereix 7.842 icones. Aquesta empresa també té el que anomenem un full de trampes de la icona. Aquesta llista mostra totes les seves icones que ofereix Font Awesome, que ens informa si formen part del paquet gratuït o del paquet professional.

Per afegir, Font Awesome també ofereix una opció per treure el codi des del CDN. Recomanem fer la seva ruta. El seu CDN té un temps de resposta ràpid i tenim poc o menys Lag entre el nostre lloc i la seva plataforma.

Andrew Ruditser, coordinador tecnològic principal
Andrew Ruditser, coordinador tecnològic principal

Jeff Romero: fa que la velocitat de la pàgina sigui molt més ràpida

Desenvolupem llocs web personalitzats a Wordpress per a clients de mida petita. Històricament hem utilitzat imatges per representar diverses icones dels nostres llocs web des dels perfils de les xarxes socials fins a les icones de telèfon i de correu electrònic. El procés per utilitzar una imatge per a icones requereix trobar un conjunt consistent d'icones, penjar-les i després canviar-les per assegurar-se que s'ajusten al lloc.

Tot i que es tracta d’un fitxer d’imatges petit, és un procés per obtenir un conjunt consistent d’icones i fer que coincideixin amb la plantilla del lloc. Ara, utilitzant Font Awesome i el seu complement Wordpress, podem substituir les icones per un conjunt consistent de suports que només requereixen copiar / enganxar una línia de HTML. Encara millor, les icones es poden redimensionar amb una petita quantitat de CSS (utilitzant la propietat de mida de lletra). Les icones es mostren millor que les icones basades en imatges i són clarament visibles en dispositius mòbils. Finalment, com que es tracta d’una línia d’HTML en lloc d’un fitxer d’imatges, fa que la velocitat de la pàgina sigui molt més ràpida.

Jeff Romero és el cofundador d'Octiv Digital, una agència de màrqueting digital especialitzada en estratègia de SEO local i empresarial, gestió de publicitat de pagament per clic, disseny / desenvolupament web i serveis d'analítica de màrqueting.
Jeff Romero és el cofundador d'Octiv Digital, una agència de màrqueting digital especialitzada en estratègia de SEO local i empresarial, gestió de publicitat de pagament per clic, disseny / desenvolupament web i serveis d'analítica de màrqueting.

Vança: especialment bo quan no teniu un dissenyador al vostre equip

Com a desenvolupador web, faig servir Font Awesome com a solució ràpida per a un munt d'icones simpàtiques. Dit això, Font Awesome és especialment bo quan no teniu cap dissenyador al vostre equip de desenvolupament. És útil per desenvolupar complements de Wordpress perquè els desenvolupadors podrien incorporar-los als seus connectors utilitzant CDNs de Font Awesome en molt poc temps.

La meva experiència amb Font Awesome és bona fins al moment. Però això no vol dir que no tingui cap inconvenient. Un dels inconvenients evidents és la velocitat de càrrega de la pàgina (rendiment). Com que és una solució ràpida, heu d’incorporar tot un conjunt d’icones tot i que només utilitzeu algunes icones. Això podria disminuir la velocitat de càrrega del lloc web i la puntuació de velocitat de pàgina (Google PSI).

Vance, desenvolupador web i propietari web.
Vance, desenvolupador web i propietari web.

Sunny Ashley: senzill, net i recognoscible a l’instant per als nous visitants

Utilitzem les icones de Font Awesome al peu de pàgina web. Concretament, fem servir les icones de Facebook, Twitter i LinkedIn per referir els nostres canals de xarxes socials. Són senzills, nets i reconeixen a l’instant per als nous visitants. Com saben altres usuaris de Font Awesome, també eren molt ràpids i fàcils de configurar.

Sunny Ashley, fundador i conseller delegat d'Autoshopinvoice. Autoshopinvoice proporciona un software de gestió de botigues per a tallers i reparacions d'automòbils independents.
Sunny Ashley, fundador i conseller delegat d'Autoshopinvoice. Autoshopinvoice proporciona un software de gestió de botigues per a tallers i reparacions d'automòbils independents.

Burak Özdemir: Les icones de ploma no provoquen una mida DOM excessiva

Feather Icons és una col·lecció d’icones de codi obert llegibles i visualment agradables dissenyades i mantingudes per Cole Bemis. A juny de 2020, hi ha més de 280 icones disponibles. Totes les icones que proporcionen els íconos de ploma tenen llicència MIT i es poden descarregar per separat com a fitxers SVG. Podeu personalitzar la mida de la icona, el color del traç de la icona i l'amplada del traç al lloc web de la icona de ploma abans de baixar-les.

Les icones de ploma poden ser una bona opció per al vostre lloc web o projecte si sou un desenvolupador o sabeu gestionar algunes tasques bàsiques de primera línia. Com que aquestes icones lleugeres també es poden representar amb una biblioteca modular de JavaScript, no provoquen una mida DOM excessiva, una mètrica que pot danyar el rendiment de la pàgina web. Així, amb l'ús de les icones de ploma, podeu reduir la velocitat de càrrega de pàgines més en comparació amb altres paquets disponibles al mercat. L’únic inconvenient d’utilitzar aquest conjunt d’icones és que no podeu trobar la majoria de les icones de la marca.

Icones de ploma
Burak Özdemir és un desenvolupador web de Turquia. És especialista en la creació d'aplicacions basades en la web.
Burak Özdemir és un desenvolupador web de Turquia. És especialista en la creació d'aplicacions basades en la web.

Michel Pinson
Sobre l’autor - Michel Pinson
Michel Pinson és un entusiasta del viatge i creador de contingut. Funcionant la passió per l'educació i l'exploració, va intervenir per compartir coneixements i inspirar els altres a través de contingut educatiu captivador. Unint el món que uneix apoderant individus amb experiència global i sensació de vagabunds.




Comentaris (0)

Deixa un comentari