7 odborných tipov na ikonu Web určuje použitie a výhody

Zaujíma vás použitie sady ikon pre váš web a ktorý z nich si vybrať? Tieto tipy pre expertov vás môžu len presvedčiť o tom, čo už veľa profesionálnych vývojárov webu vie: je oveľa ľahšie prehľadávať ikony zo zahrnutej sady ikon, ako nájsť ikony jeden po druhom a nájsť spôsob, ako ich dosiahnuť súdržnosťou.

Požiadali sme komunitu o najlepšie tipy na používanie sady ikon a mnoho z nich súhlasí s používaním populárnej sady ikon Font Awesome, avšak toto nie je jediná sada ikon, ktorá je na trhu k dispozícii.

Ktorú sadu ikon používate? Dajte nám vedieť v komentároch!

 Používate pre svoj web konkrétnu sadu ikon? Používate Font Awesome na konkrétne použitie (napr. S Shopify, pre informačný bulletin, ...)? Ak áno, prečo ho používate a aké sú vaše skúsenosti so sadou ikon? Použili ste ich CDN, všimli ste si nejaké zlepšenie pre vaše použitie?

Jeff Roscher: dodáva pekný jednoduchý štýl, ktorý zákazníkom pripadá moderný a príťažlivý

Používame Font Awesome na eWorkOrders.com. Je súčasťou našej marketingovej stránky a nášho softvéru ako služba (SAAS), počítačového systému riadenia údržby (CMMS). Na naše marketingové stránky dodáva pekný jednoduchý štýl, ktorý potenciálnym zákazníkom pripadá moderný a príťažlivý. Pridali sme zaujímavé hranice a udalosti prechodu myšou, aby boli interaktívnejšie a vzrušujúce. Ikony Font Awesome sa pre našich zákazníkov používajú ako vizuálne podnety vo vstupných poliach, ktoré pomáhajú určiť, aký typ údajov by sa mal zadávať, napríklad ikona kalendára v poli dátumu, obálka v poli e-mailovej adresy alebo ikona telefónu v poli pole pre telefónne číslo. Používajú sa na funkčných tlačidlách, ako sú úpravy, kopírovanie a tlač.

Ikony sa používajú na poskytovanie rýchlych vizuálnych informácií o údajoch, ako je červená ikona vykričania vedľa oneskoreného pracovného príkazu alebo keď si niečo vyžaduje pozornosť. Sú aj na niekoľkých ďalších miestach, aby program vyzeral krajšie.

Písmo Awesome bolo úžasné! Ich číslo CDN je rýchle a existuje veľa možností pre každý druh ikony, ktorú potrebujeme. Nikdy sme neboli sklamaní.

Rachel Foley: cenovo dostupný spôsob ľahkého prístupu k obrovskej knižnici ikon

V službe Map My Customer sa plne spoliehame na písmo Awesome pre našu ikonografiu vo všetkých marketingových kanáloch a našich produktoch vrátane našich:

• webové stránky
• e-maily
• Sociálne médiá
• Vlastná grafika
• Mobilná aplikácia
• Webová aplikácia

Používame Font Awesome, pretože je to cenovo dostupný spôsob ľahkého prístupu k obrovskej knižnici ikon. Štýl je skôr na hravej strane, ktorá je v súlade s našou značkou; Navyše, schopnosť používať rôzne hmotnosti a štýly ikon nám dáva slobodu.

CDN používame pre naše aplikácie, čo umožňuje veľmi konzistentný dojem v používateľskom prostredí produktu. Navyše - ak je to potrebné, je to veľmi jednoduché. S marketingovými materiálmi sme trochu flexibilnejší a používame kombináciu CDN, našich lokálnych inštalačných a vektorových verzií.

Od úplného prijatia v januári sme pre nás FA vždy spoľahliví.

Andrew Ruditser: ako sme vylepšili písmo Awesome, tak sme to urobili aj my

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 Sociálne médiá 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.

Písmo Awesome teraz ponúka širokú škálu ikon, z ktorých si môžete vybrať. Považujeme túto flexibilitu za užitočnú pre nás od fázy návrhu po fázu vývoja. Pre Font Awesome ponúka ich platforma svojim používateľom dve možnosti. Prvá možnosť je bezplatná služba, ktorá ponúka 1 588 bezplatných ikon. Druhou možnosťou je členstvo v programe Pro, ktoré ponúka 7 842 ikon. Táto spoločnosť má tiež to, čo nazývame ikona podvádzať list. Tento zoznam zobrazuje všetky ich ikony, ktoré ponúka ponuka Awesome, čo nás informuje, či sú súčasťou bezplatného balíka alebo balíka Pro.

Ak chcete pridať, Font Awesome tiež ponúka možnosť vytiahnuť svoj kód z ich CDN. Dôrazne odporúčame ísť svojou cestou. Ich CDN má rýchly čas odozvy a medzi našou stránkou a ich platformou máme málo alebo žiadnu „lag“.

Jeff Romero: zrýchľuje rýchlosť stránky

Na Wordpress vyvíjame vlastné webové stránky pre malých a stredne veľkých obchodných klientov. Historicky sme použili obrázky na znázornenie rôznych ikon na našich webových stránkach, od profilov sociálnych médií po telefónne a e-mailové ikony. Proces použitia obrázka pre ikony vyžaduje nájdenie konzistentnej sady ikon, ich odovzdanie a zmenu veľkosti, aby sa zaistilo, že sa zmestia na stránku.

Aj keď je to malý súbor s obrázkom, je to trochu proces, ako získať konzistentnú sadu ikon a nechať ich, aby sa zhodovali so šablónou stránok. Teraz pomocou písma Awesome a jeho doplnku Wordpress môžeme nahradiť ikony konzistentnou sadou médií, ktoré jednoducho vyžadujú kopírovanie / prilepenie riadku HTML. Ešte lepšie je zmeniť veľkosť ikon pomocou malého množstva CSS (pomocou vlastnosti font-size). Ikony sa zobrazujú lepšie ako ikony založené na obrázkoch a sú zreteľne viditeľné na mobilných zariadeniach. Nakoniec, keďže ide skôr o rad HTML než o súbor s obrázkom, zvyšuje rýchlosť stránky oveľa rýchlejšie.

Vance: zvlášť dobré, keď vo svojom tíme nemáte dizajnéra

Ako webový vývojár používam Font Awesome ako rýchle riešenie pre množstvo pekných ikon. Ako už bolo povedané, Font Awesome je obzvlášť dobrý, keď vo svojom vývojovom tíme nemáte dizajnéra. Je to užitočné pri vývoji doplnkov Wordpress, pretože vývojári ich mohli vložiť do svojich doplnkov pomocou CDN Font Awesome v čo najkratšom čase.

Moje doterajšie skúsenosti s programom Font Awesome sú dobré. To však neznamená, že to nemá žiadne nevýhody. Jednou zo zrejmých nevýhod je rýchlosť načítania stránky (výkon). Keďže ide o rýchle riešenie, musíte vložiť celú sadu ikon, aj keď stačí použiť niekoľko ikon. To by mohlo znížiť rýchlosť načítania webových stránok a skóre Google Page Speed ​​(PSI).

Sunny Ashley: jednoduché, čisté a okamžite rozpoznateľné pre nových návštevníkov

V päte našej webovej stránky používame ikony funkcie Font Awesome. Konkrétne používame ikony Facebook, Twitter a LinkedIn na odkazovanie na naše kanály sociálnych médií. Sú jednoduché, čisté a okamžite rozpoznateľné pre nových návštevníkov. Ako ostatní používatelia programu Font Awesome vedia, boli tiež veľmi rýchlo a ľahko nakonfigurovateľní.

Burak Özdemir: Ikony peria nespôsobujú nadmernú veľkosť DOM

Feather Icons je zbierka čitateľných, vizuálne príjemných ikon s otvoreným zdrojom, ktoré navrhol a udržiava Cole Bemis. Od júna 2020 je k dispozícii viac ako 280 ikon. Všetky ikony poskytované ikonami Feather Icons sú licencované MIT a dajú sa stiahnuť samostatne ako súbory SVG. Veľkosť ikony, farbu ťahu ikony a šírku ťahu si môžete prispôsobiť na webovej stránke Feather Icon pred ich stiahnutím.

Ikony peria môžu byť skvelou voľbou pre váš web alebo projekt, ak ste vývojár alebo viete zvládnuť niektoré základné úlohy front-end. Keďže tieto ľahké ikony možno vykresliť aj pomocou modulárnej knižnice JavaScriptu, nespôsobujú nadmernú veľkosť DOM, metriku, ktorá môže poškodiť výkon vašich webových stránok. S použitím ikon peria môžete znížiť rýchlosť načítania stránky v porovnaní s inými balíkmi dostupnými na trhu. Jedinou nevýhodou použitia tejto sady ikon je, že nemôžete nájsť väčšinu ikon značky.