Ang 7 mga tip sa dalubhasa sa icon ng Web ay nagtatakda ng paggamit at benepisyo



Nagtataka ka ba tungkol sa paggamit ng isang set ng icon para sa iyong web site at alin ang pipiliin? Ang mga dalubhasang tip na ito ay maaari lamang kumbinsihin ka tungkol sa kung ano ang alam ng maraming mga propesyonal na developer ng web: mas madaling maghanap ng mga icon mula sa isang kasama na set ng icon, kaysa makahanap ng mga icon ng isa at maghanap ng isang paraan upang gawin silang pare-pareho pare-pareho.

Tinanong namin ang komunidad para sa kanilang pinakamahusay na mga tip sa paggamit ng mga set ng icon, at marami sa kanila ang sumasang-ayon sa paggamit ng sikat na Font Awesome icon set, ngunit gayunpaman hindi lamang ang set ng icon na magagamit sa merkado.

Aling icon ang ginagamit mo? Ipaalam sa amin sa mga komento!

 Gumagamit ka ba ng isang tukoy na set ng icon para sa iyong website? Gumagamit ka ba ng Font Galing para sa isang tiyak na paggamit (i.e. kasama ang Shopify, para sa isang newsletter, ...)? Kung gayon, bakit mo ito ginagamit, at ano ang iyong karanasan sa set ng icon? Ginamit mo ba ang kanilang CDN, napansin mo ba ang anumang pagpapabuti para sa iyong paggamit?

Jeff Roscher: nagdaragdag ito ng magandang simpleng estilo na makahanap ng mga modernong at kaakit-akit ang mga customer

Ginagamit namin ang Font Galing sa eWorkOrders.com. Ito ay bahagi ng parehong aming site sa marketing at aming software bilang isang serbisyo (SAAS) na alay, isang computerized management system (CMMS). Sa aming site sa pagmemerkado, nagdaragdag ito ng magandang simpleng estilo na makahanap ng mga makabagong at kaakit-akit na mga customer. Nagdagdag kami ng mga kagiliw-giliw na mga hangganan at mga kaganapan sa mouseover upang gawin silang mas interactive at kapana-panabik. Para sa aming mga customer, ang mga icon ng Font Awesome ay ginagamit bilang visual cue sa loob ng mga larangan ng input upang matukoy kung anong uri ng data ang dapat ipasok, tulad ng isang icon ng kalendaryo sa isang patlang ng petsa, isang sobre sa patlang ng email address, o isang icon ng telepono sa isang patlang para sa isang numero ng telepono. Ginagamit ang mga ito sa mga pindutan ng functional, tulad ng pag-edit, kopyahin, at pag-print.

Ang mga icon ay ginagamit upang magbigay ng mabilis na impormasyon sa visual tungkol sa data tulad ng isang pulang icon ng bulalas sa tabi ng isang sobrang pag-order ng trabaho o kung may kailangan ng pansin. Sila ay nasa ilang iba pang mga lugar pati na rin upang gawing mas maganda ang programa ..

Kahanga-hanga Font ay kahanga-hangang! Mabilis ang kanilang CDN at maraming mga pagpipilian para sa bawat iba't ibang uri ng icon na kailangan namin. Hindi kami kailanman nabigo.

Si Jeff ang pangulo ng eWorkOrders.com. eWorkOrders ay isang madaling gamitin na web-based na CMMS na tumutulong sa mga customer na pamahalaan ang mga kahilingan sa serbisyo, mga order sa trabaho, mga assets, preventive maintenance, at marami pa.
Si Jeff ang pangulo ng eWorkOrders.com. eWorkOrders ay isang madaling gamitin na web-based na CMMS na tumutulong sa mga customer na pamahalaan ang mga kahilingan sa serbisyo, mga order sa trabaho, mga assets, preventive maintenance, at marami pa.

Rachel Foley: isang abot-kayang paraan upang ma-access ang isang napakalaking library ng icon nang madali

Sa I-Map ang Aking Mga Customer, lubos kaming umaasa sa Font Galing para sa aming iconograpya sa lahat ng mga marketing channel at aming produkto kasama ang aming:

  • Website
  • Mga email
  • Social Media
  • Pasadyang Graphics
  • Mobile App
  • Web App

Ginagamit namin ang Font Galing sapagkat ito ay isang abot-kayang paraan upang ma-access ang isang napakalaking library ng icon nang madali. Ang estilo ay higit pa sa mapaglarong bahagi na nakahanay sa aming tatak; Dagdag pa, ang kakayahan para sa amin na magamit ang iba't ibang mga timbang at estilo ng mga icon ay nagbibigay sa amin ng kalayaan.

Ginagamit namin ang CDN para sa aming mga aplikasyon na nagbibigay-daan para sa isang napaka-pare-pareho na pakiramdam sa buong karanasan ng gumagamit. Dagdag pa - napakadali nitong i-upgrade kung kailangan namin. Sa mga materyales sa pagmemerkado, medyo mas nababaluktot kami at gumamit ng isang halo ng CDN, ang aming lokal na bersyon at vector na bersyon.

Ang FA ay palaging maaasahan para sa amin mula nang lubusang nakamit namin noong Enero.

Si Rachel ay isang taga-disenyo ng web na nakabase sa NYC at propesyonal sa marketing ng nilalaman na may isang drive upang mapahusay ang lumalaking mga tatak ng B2B at bumuo ng pangmatagalang tagumpay sa marketing sa pamamagitan ng diskarte sa SEO. Kasalukuyan siyang nasa I-Map ang Aking Mga Customer, isang kumpanya ng software ng benta ng B2B na lumilikha ng mga solusyon para sa mga koponan sa pagbebenta ng larangan.
Si Rachel ay isang taga-disenyo ng web na nakabase sa NYC at propesyonal sa marketing ng nilalaman na may isang drive upang mapahusay ang lumalaking mga tatak ng B2B at bumuo ng pangmatagalang tagumpay sa marketing sa pamamagitan ng diskarte sa SEO. Kasalukuyan siyang nasa I-Map ang Aking Mga Customer, isang kumpanya ng software ng benta ng B2B na lumilikha ng mga solusyon para sa mga koponan sa pagbebenta ng larangan.

Andrew Ruditser: bilang na-upgrade ang Font Galing, gayon din ang ginawa namin

Ginagamit ang Font Galing sa lahat ng aming mga site mula pa sa madaling araw. Nang una naming magsimula sa pakikipagtulungan sa Font Galing, pangunahing ginagamit ito para sa kanilang mga Imahe sa Social Media. Tulad ng pag-upgrade ng Font Galing, ganoon din ang ginawa namin. Hindi lamang ang kanilang mga icon ng telepono na hindi kapani-paniwala, nasisiyahan kami sa mga nakakatawang mga icon na inaalok nila. Tulad ng kamakailan, inihayag ng Font Awesome ang kanilang bersyon 6 na mga icon. Sa amin, ipinapakita nito na ang Font Awesome ay nagmamalasakit sa kanilang mga gumagamit, at nais na panatilihing napapanahon ang kanilang system sa kamakailang code.

Nag-aalok ang Font Kahanga-hanga ng isang malawak na hanay ng mga icon upang pumili mula sa. Nalaman namin ang kakayahang umangkop na ito upang maging kapaki-pakinabang para sa amin mula sa yugto ng Disenyo hanggang sa aming yugto ng Pag-unlad. Para sa Font Galing, ang kanilang platform ay nag-aalok ng dalawang mga pagpipilian para sa kanilang mga gumagamit. Ang Unang Mga Pagpipilian ay isang Libreng serbisyo, na nag-aalok ng 1,588 libreng mga icon upang pumili. Ang pangalawang pagpipilian ay isang pagiging kasapi ng Pro, na nag-aalok ng 7,842 mga icon. Ang kumpanyang ito ay mayroon ding tinatawag na isang Icon cheat sheet. Ipinapakita ng listahang ito ang lahat ng kanilang mga icon na inaalok ng Font Galing, na nagpapaalam sa amin kung sila ay bahagi ng libreng pakete o pro package.

Upang magdagdag, nag-aalok din ang Font Awesome ng isang pagpipilian upang hilahin ang kanilang code mula sa kanilang CDN. Lubos naming inirerekumenda ang pagpunta sa kanilang ruta. Ang kanilang CDN ay may isang mabilis na oras ng pagtugon, at kaunti lang ang hindi namin Lag sa pagitan ng aming site at kanilang platform.

Si Andrew Ruditser, Coordinator ng Teknolohiya ng Lead
Si Andrew Ruditser, Coordinator ng Teknolohiya ng Lead

Jeff Romero: ginagawang mas mabilis ang bilis ng pahina

Bumubuo kami ng mga pasadyang website sa Wordpress para sa mga maliliit na kliyente sa negosyo. Makasaysayang ginamit namin ang mga imahe upang kumatawan sa iba't ibang mga icon sa aming mga website na nagmula sa mga profile ng social media hanggang sa mga icon ng telepono at email. Ang proseso upang gumamit ng isang imahe para sa mga icon ay nangangailangan ng paghahanap ng isang pare-pareho na hanay ng mga icon, pag-upload ng mga ito at pagkatapos ay baguhin ang laki ng mga ito upang matiyak na akma sila sa site.

Kahit na ito ay isang maliit na file ng imahe, medyo isang proseso upang makakuha ng isang pare-pareho na hanay ng mga icon at ipatugma ang mga ito sa template ng site. Ngayon, gamit ang Font Galing at ang plugin nito ng Wordpress, maaari naming palitan ang mga icon na may pare-pareho na hanay ng media na nangangailangan lamang ng pagkopya / pag-paste ng isang linya ng HTML. Kahit na mas mahusay, ang mga icon ay maaaring baguhin ang laki ng isang maliit na halaga ng CSS (gamit ang pag-aari ng laki ng font). Ang mga icon ay nagpapakita ng mas mahusay kaysa sa isang icon na batay sa imahe at malinaw na nakikita sa mga mobile device. Sa wakas, dahil ito ay isang linya ng HTML sa halip na isang file ng imahe, ginagawang mas mabilis ang bilis ng pahina.

Si Jeff Romero ay ang co-founder ng Octiv Digital, isang ahensya ng marketing sa digital na dalubhasa sa diskarte sa lokal at enterprise SEO, pamamahala ng advertising na pay-per-click, disenyo ng web / pag-unlad at mga serbisyo sa marketing analytics.
Si Jeff Romero ay ang co-founder ng Octiv Digital, isang ahensya ng marketing sa digital na dalubhasa sa diskarte sa lokal at enterprise SEO, pamamahala ng advertising na pay-per-click, disenyo ng web / pag-unlad at mga serbisyo sa marketing analytics.

Vance: lalo na mabuti kapag wala kang isang disenyo sa iyong koponan

Bilang isang developer ng web, gumagamit ako ng Font Galing bilang isang mabilis na solusyon para sa maraming magagandang mga icon. Iyon ay sinabi, Font Awesome ay lalong mabuti kapag wala kang isang disenyo sa iyong pangkat ng pag-unlad. Ito ay madaling gamitin para sa pagbuo ng mga Wordpress plugin dahil maaaring mai-embed ng mga developer ang mga ito sa kanilang mga plugin gamit ang Font Awesome's CDNs sa walang oras.

Ang aking karanasan sa Font Awesome ay mabuti hanggang ngayon. Ngunit hindi ito nangangahulugan na wala itong mga drawbacks. Ang isa sa mga halatang disbentaha ay ang bilis ng pag-load ng pahina (pagganap). Dahil ito ay isang mabilis na solusyon, kailangan mong mag-embed ng isang buong hanay ng mga icon kahit na gumamit ka lamang ng ilang mga icon. Iyon ay maaaring bawasan ang bilis ng pag-load ng website at mga marka ng Google Page Speed ​​(PSI).

Vance, isang web developer at isang may-ari ng web.
Vance, isang web developer at isang may-ari ng web.

Madaling Ashley: simple, malinis, at agad na makikilala para sa mga bagong bisita

Ginagamit namin ang  Font Galing na mga icon   sa aming website na footer. Partikular, ginagamit namin ang mga icon ng Facebook, Twitter, at LinkedIn upang i-refer ang aming mga channel sa social media. Ang mga ito ay simple, malinis, at agad na nakikilala para sa mga bagong bisita. Tulad ng alam ng ibang mga gumagamit ng Font Awesome, napakabilis at madaling i-configure din.

Si Sunny Ashley, tagapagtatag at CEO ng Autoshopinvoice. Nagbibigay ang Autoshopinvoice ng software management shop para sa mga independiyenteng auto repair shops at garahe.
Si Sunny Ashley, tagapagtatag at CEO ng Autoshopinvoice. Nagbibigay ang Autoshopinvoice ng software management shop para sa mga independiyenteng auto repair shops at garahe.

Burak Özdemir: Ang mga Icon ng Feather ay hindi nagiging sanhi ng labis na sukat ng DOM

Ang Mga Icon ng Feather ay isang koleksyon ng nababasa, biswal na nakalulugod na mga icon ng open-source na dinisenyo at pinapanatili ng Cole Bemis. Hanggang Hunyo 2020, mayroong higit sa 280 mga icon na magagamit. Ang lahat ng mga icon na ibinigay ng Feather Icon ay lisensyado ng MIT, at mai-download nang hiwalay bilang mga file ng SVG. Maaari mong ipasadya ang laki ng icon, kulay ng stroke ng icon, at lapad ng stroke sa website ng Feather Icon bago i-download ang mga ito.

Ang Mga Icon ng Feather ay maaaring maging isang mahusay na pagpipilian para sa iyong website o proyekto kung ikaw ay isang developer o alam kung paano hahawak ang ilang mga pangunahing gawain sa harap. Tulad ng mga magaan na icon na maaari ring ma-render sa isang modular na library ng JavaScript, hindi sila nagiging sanhi ng labis na sukat ng DOM, isang sukatan na maaaring makapinsala sa pagganap ng iyong web page. Sa gayon, sa paggamit ng mga Icon ng Feather, maaari mong ibababa ang bilis ng pag-load ng pahina kumpara sa iba pang mga pakete na magagamit sa merkado. Ang tanging downside ng paggamit ng set ng icon na ito ay hindi mo mahahanap ang karamihan sa mga icon ng tatak.

Mga Icon ng Feather
Si Burak Özdemir ay isang developer ng web mula sa Turkey. Dalubhasa siya sa paglikha ng mga application na batay sa web.
Si Burak Özdemir ay isang developer ng web mula sa Turkey. Dalubhasa siya sa paglikha ng mga application na batay sa web.



(0)