7 เคล็ดลับจากผู้เชี่ยวชาญเกี่ยวกับไอคอนบนเว็บเป็นการกำหนดการใช้งานและสิทธิประโยชน์



คุณสงสัยเกี่ยวกับการใช้ชุดไอคอนสำหรับเว็บไซต์ของคุณและเลือกได้ไหม? เคล็ดลับจากผู้เชี่ยวชาญเหล่านี้อาจโน้มน้าวคุณเกี่ยวกับสิ่งที่นักพัฒนาเว็บมืออาชีพหลายคนรู้แล้ว: การค้นหาไอคอนจากชุดไอคอนที่รวมไว้นั้นง่ายกว่าการหาไอคอนทีละชุดและหาวิธีที่จะทำให้สอดคล้องกัน

เราถามชุมชนเกี่ยวกับเคล็ดลับที่ดีที่สุดในการใช้ชุดไอคอนและหลายคนเห็นด้วยกับการใช้ชุดไอคอน Awesome Awesome ยอดนิยม แต่อย่างไรก็ตามนั่นไม่ใช่ชุดไอคอนเดียวที่มีอยู่ในตลาด

คุณใช้ชุดไอคอนใด แจ้งให้เราทราบในความคิดเห็น!

 คุณใช้ชุดไอคอนเฉพาะสำหรับเว็บไซต์ของคุณหรือไม่ คุณใช้ Font Awesome สำหรับการใช้งานเฉพาะ (เช่นกับ Shopify สำหรับจดหมายข่าว, ... ) หรือไม่ ถ้าเป็นเช่นนั้นทำไมคุณถึงใช้มันและประสบการณ์ของคุณกับชุดไอคอนคืออะไร? คุณใช้ CDN ของพวกเขาคุณสังเกตเห็นการปรับปรุงใด ๆ สำหรับการใช้งานของคุณ?

Jeff Roscher: มันเพิ่มสไตล์การแต่งตัวที่เรียบง่ายที่ลูกค้าพบว่าทันสมัยและน่าดึงดูด

เราใช้ Font Awesome ที่ eWorkOrders.com มันเป็นส่วนหนึ่งของทั้งเว็บไซต์ทางการตลาดและซอฟต์แวร์ของเราในฐานะบริการ (SAAS) ซึ่งเป็นระบบจัดการการบำรุงรักษาด้วยคอมพิวเตอร์ (CMMS) บนเว็บไซต์การตลาดของเรามันเพิ่มสไตล์ที่ดูเรียบง่ายที่ลูกค้าคาดหวังจะพบกับความทันสมัยและน่าดึงดูด เราได้เพิ่มขอบเขตและเหตุการณ์การวางเมาส์ที่น่าสนใจเพื่อให้โต้ตอบและน่าตื่นเต้นยิ่งขึ้น สำหรับลูกค้าของเราไอคอนแบบอักษรเจ๋งจะถูกใช้เป็นคิวภาพภายในช่องป้อนข้อมูลเพื่อช่วยระบุประเภทข้อมูลที่ควรป้อนเช่นไอคอนปฏิทินในฟิลด์วันที่ซองจดหมายในฟิลด์ที่อยู่อีเมลหรือไอคอนโทรศัพท์ใน สำหรับหมายเลขโทรศัพท์ ปุ่มเหล่านี้ใช้กับปุ่มที่ใช้งานได้เช่นแก้ไขคัดลอกและพิมพ์

ไอคอนถูกใช้เพื่อให้ข้อมูลภาพที่รวดเร็วเกี่ยวกับข้อมูลเช่นไอคอนอัศเจรีย์สีแดงถัดจากลำดับการทำงานที่ค้างชำระหรือเมื่อมีบางสิ่งที่ต้องการความสนใจ พวกเขาอยู่ในที่อื่นไม่กี่แห่งเช่นกันเพื่อให้โปรแกรมดูดีขึ้น ..

Font Awesome ยอดเยี่ยม! CDN ของพวกเขาเร็วและมีตัวเลือกมากมายสำหรับไอคอนทุกประเภทที่เราต้องการ เราไม่เคยผิดหวัง

Jeff เป็นประธานของ eWorkOrders.com eWorkOrders เป็น CMMS บนเว็บที่ใช้งานง่ายซึ่งช่วยให้ลูกค้าจัดการคำขอบริการคำสั่งงานสินทรัพย์การบำรุงรักษาเชิงป้องกันและอื่น ๆ
Jeff เป็นประธานของ eWorkOrders.com eWorkOrders เป็น CMMS บนเว็บที่ใช้งานง่ายซึ่งช่วยให้ลูกค้าจัดการคำขอบริการคำสั่งงานสินทรัพย์การบำรุงรักษาเชิงป้องกันและอื่น ๆ

Rachel Foley: วิธีการเข้าถึงไลบรารีไอคอนขนาดใหญ่ได้อย่างง่ายดาย

ที่แผนที่ลูกค้าของฉันเราใช้ตัวอักษรยอดเยี่ยมอย่างเต็มที่เพื่อยึดถือไอคอนของเราในทุกช่องทางการตลาดและผลิตภัณฑ์รวมถึง

  • เว็บไซต์
  • อีเมล์
  • สื่อสังคม
  • กราฟิกที่กำหนดเอง
  • แอพมือถือ
  • เว็บแอป

เราใช้ Font Awesome เพราะเป็นวิธีที่ประหยัดในการเข้าถึงห้องสมุดไอคอนขนาดใหญ่ได้อย่างง่ายดาย สไตล์เป็นมากกว่าในด้านขี้เล่นซึ่งสอดคล้องกับแบรนด์ของเรา; นอกจากนี้ความสามารถในการใช้น้ำหนักและรูปแบบไอคอนที่แตกต่างกันทำให้เรามีอิสระ

เราใช้ CDN สำหรับแอปพลิเคชันของเราซึ่งจะให้ความรู้สึกสอดคล้องกับประสบการณ์การใช้งานของผู้ใช้ผลิตภัณฑ์ บวก - มันง่ายมากที่จะอัปเกรดเมื่อเราต้องการ ด้วยสื่อการตลาดเรามีความยืดหยุ่นมากขึ้นและใช้ส่วนผสมของ CDN เวอร์ชันการติดตั้งและเวกเตอร์ในพื้นที่ของเรา

เอฟเอมีความน่าเชื่อถือสำหรับเรามาตลอดตั้งแต่เราได้รับการอุปถัมภ์ในเดือนมกราคม

Rachel เป็นนักออกแบบเว็บไซต์และนักการตลาดด้านเนื้อหามืออาชีพจาก NYC พร้อมผลักดันให้แบรนด์ B2B เติบโตและสร้างความสำเร็จด้านการตลาดในระยะยาวผ่านกลยุทธ์ SEO ปัจจุบันเธออยู่ที่ ทำแผนที่ลูกค้าของฉัน ซึ่งเป็น บริษัท ซอฟต์แวร์การขาย B2B สร้างโซลูชันสำหรับทีมขายภาคสนาม
Rachel เป็นนักออกแบบเว็บไซต์และนักการตลาดด้านเนื้อหามืออาชีพจาก NYC พร้อมผลักดันให้แบรนด์ B2B เติบโตและสร้างความสำเร็จด้านการตลาดในระยะยาวผ่านกลยุทธ์ SEO ปัจจุบันเธออยู่ที่ ทำแผนที่ลูกค้าของฉัน ซึ่งเป็น บริษัท ซอฟต์แวร์การขาย B2B สร้างโซลูชันสำหรับทีมขายภาคสนาม

Andrew Ruditser: เมื่อตัวอักษรยอดเยี่ยมได้รับการอัพเกรดเราก็เช่นกัน

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 สื่อสังคม 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 มีไอคอนหลากหลายให้เลือก เราพบว่าความยืดหยุ่นนี้จะเป็นประโยชน์สำหรับเราตั้งแต่ขั้นตอนการออกแบบไปจนถึงขั้นตอนการพัฒนาของเรา สำหรับ Font Awesome แพลตฟอร์มของพวกเขามีสองตัวเลือกสำหรับผู้ใช้ ตัวเลือกแรกคือบริการฟรีซึ่งมีไอคอนให้ฟรี 1,588 แบบให้เลือก ตัวเลือกที่สองคือสมาชิก Pro ซึ่งมีไอคอน 7,842 บริษัท นี้มีสิ่งที่เราเรียกว่าแผ่นโกงไอคอน รายการนี้แสดงไอคอนทั้งหมดที่ Font Awesome มีซึ่งจะแจ้งให้เราทราบหากเป็นส่วนหนึ่งของแพ็คเกจฟรีหรือแพคเกจมืออาชีพ

หากต้องการเพิ่ม Font Awesome ยังมีตัวเลือกในการดึงรหัสจาก CDN เราขอแนะนำอย่างยิ่งว่าจะไปยังเส้นทางของพวกเขา CDN ของพวกเขามีเวลาตอบสนองที่รวดเร็วและเรามี“ ความล่าช้า” เล็กน้อยระหว่างเว็บไซต์ของเราและแพลตฟอร์มของพวกเขา

Andrew Ruditser ผู้ประสานงานเทคโนโลยีหลัก
Andrew Ruditser ผู้ประสานงานเทคโนโลยีหลัก

Jeff Romero: มันทำให้ความเร็วของหน้าเร็วขึ้นมาก

เราพัฒนาเว็บไซต์ที่กำหนดเองบน Wordpress สำหรับลูกค้าธุรกิจขนาดเล็กถึงขนาดกลาง เราใช้รูปภาพในอดีตเพื่อแสดงไอคอนต่างๆบนเว็บไซต์ของเราตั้งแต่โปรไฟล์โซเชียลมีเดียไปจนถึงไอคอนโทรศัพท์และอีเมล กระบวนการในการใช้รูปภาพสำหรับไอคอนนั้นจำเป็นต้องค้นหาชุดไอคอนที่สอดคล้องกันอัปโหลดแล้วปรับขนาดเพื่อให้แน่ใจว่าพอดีกับไซต์

แม้ว่าจะเป็นไฟล์รูปภาพขนาดเล็ก แต่เป็นกระบวนการเล็กน้อยที่จะได้รับชุดไอคอนที่สอดคล้องกันและทำให้พวกเขาตรงกับแม่แบบของไซต์ ตอนนี้การใช้ Font Awesome และปลั๊กอิน Wordpress เราสามารถแทนที่ไอคอนด้วยชุดสื่อที่สอดคล้องกันซึ่งเพียงแค่ต้องการคัดลอก / วางบรรทัด HTML ยิ่งไปกว่านั้นไอคอนสามารถปรับขนาดได้ด้วย CSS จำนวนเล็กน้อย (โดยใช้คุณสมบัติขนาดตัวอักษร) ไอคอนแสดงผลได้ดีกว่าไอคอนที่ใช้รูปภาพและสามารถมองเห็นได้อย่างชัดเจนบนอุปกรณ์มือถือ ท้ายที่สุดเนื่องจากเป็นบรรทัด HTML แทนที่จะเป็นไฟล์รูปภาพจึงทำให้ความเร็วของหน้าเว็บเร็วขึ้นมาก

Jeff Romero เป็นผู้ร่วมก่อตั้งของ Octiv Digital ตัวแทนการตลาดดิจิทัลที่มีความเชี่ยวชาญในกลยุทธ์ SEO ในระดับท้องถิ่นและระดับองค์กรการจัดการโฆษณาแบบจ่ายต่อคลิกการออกแบบเว็บ / การพัฒนาและบริการวิเคราะห์การตลาด
Jeff Romero เป็นผู้ร่วมก่อตั้งของ Octiv Digital ตัวแทนการตลาดดิจิทัลที่มีความเชี่ยวชาญในกลยุทธ์ SEO ในระดับท้องถิ่นและระดับองค์กรการจัดการโฆษณาแบบจ่ายต่อคลิกการออกแบบเว็บ / การพัฒนาและบริการวิเคราะห์การตลาด

Vance: ดีมากเมื่อคุณไม่มีนักออกแบบในทีมของคุณ

ในฐานะนักพัฒนาเว็บฉันใช้ Font Awesome เป็นวิธีแก้ปัญหาอย่างรวดเร็วสำหรับไอคอนที่สวยงามมากมาย ดังที่กล่าวไว้ว่า Font Awesome นั้นดีเป็นพิเศษเมื่อคุณไม่มีนักออกแบบในทีมพัฒนาของคุณ เป็นประโยชน์สำหรับการพัฒนาปลั๊กอิน Wordpress เนื่องจากนักพัฒนาสามารถฝังลงในปลั๊กอินโดยใช้ CDN ของ Font Awesome ได้ในเวลาไม่นาน

ประสบการณ์ของฉันกับ Font Awesome นั้นดีมาก แต่นั่นไม่ได้หมายความว่ามันจะไม่มีข้อเสีย หนึ่งในข้อเสียที่ชัดเจนคือความเร็วในการโหลดหน้าเว็บ (ประสิทธิภาพ) เนื่องจากเป็นวิธีแก้ปัญหาอย่างรวดเร็วคุณต้องฝังไอคอนทั้งชุดแม้ว่าคุณจะใช้เพียงไม่กี่ไอคอน นั่นอาจลดความเร็วในการโหลดเว็บไซต์และคะแนน Google Page Speed ​​(PSI)

Vance นักพัฒนาเว็บและเจ้าของเว็บไซต์
Vance นักพัฒนาเว็บและเจ้าของเว็บไซต์

Sunny Ashley: เรียบง่ายสะอาดตาและเป็นที่จดจำสำหรับผู้เยี่ยมชมใหม่

เราใช้ไอคอน Font Awesome ในส่วนท้ายเว็บไซต์ของเรา เราใช้ไอคอน Facebook, Twitter และ LinkedIn เพื่ออ้างอิงช่องทางโซเชียลมีเดียของเรา พวกเขาเรียบง่ายสะอาดและเป็นที่จดจำได้ทันทีสำหรับผู้เข้าชมใหม่ เมื่อผู้ใช้ Font Awesome รู้เรื่องพวกเขาพวกเขาก็รวดเร็วและง่ายต่อการกำหนดค่า

ซันนีแอชลีย์ผู้ก่อตั้งและซีอีโอของ Autoshopinvoice Autoshopinvoice มอบซอฟต์แวร์การจัดการร้านค้าสำหรับร้านซ่อมรถยนต์และโรงรถอิสระ
ซันนีแอชลีย์ผู้ก่อตั้งและซีอีโอของ Autoshopinvoice Autoshopinvoice มอบซอฟต์แวร์การจัดการร้านค้าสำหรับร้านซ่อมรถยนต์และโรงรถอิสระ

Burak Özdemir: ไอคอนรูปขนนกไม่ทำให้เกิดขนาด DOM มากเกินไป

Feather Icons เป็นชุดของไอคอนโอเพนซอร์ซที่สามารถอ่านได้และออกแบบโดย Cole Bemis ตั้งแต่เดือนมิถุนายน 2020 มีไอคอนมากกว่า 280 ไอคอน ไอคอนทั้งหมดที่มีให้โดยไอคอนขนนกนั้นเป็นลิขสิทธิ์ของ MIT และสามารถดาวน์โหลดแยกเป็นไฟล์ SVG ได้ คุณสามารถปรับแต่งขนาดไอคอนสีเส้นขีดของไอคอนและความกว้างของเส้นขีดบนเว็บไซต์ของไอคอนขนนกก่อนที่จะดาวน์โหลด

ไอคอนขนนกอาจเป็นตัวเลือกที่ยอดเยี่ยมสำหรับเว็บไซต์หรือโครงการของคุณหากคุณเป็นนักพัฒนาซอฟต์แวร์หรือรู้วิธีจัดการงานส่วนหน้าพื้นฐาน เนื่องจากไอคอนที่มีน้ำหนักเบาเหล่านี้สามารถแสดงผลด้วยไลบรารี JavaScript แบบแยกส่วนได้จึงไม่ทำให้ขนาด DOM มากเกินไปซึ่งเป็นตัวชี้วัดที่อาจเป็นอันตรายต่อประสิทธิภาพการทำงานของหน้าเว็บของคุณ ดังนั้นเมื่อใช้ไอคอนรูปขนนกคุณสามารถลดความเร็วในการโหลดหน้าเว็บได้มากขึ้นเมื่อเทียบกับแพ็คเกจอื่น ๆ ที่มีในตลาด ข้อเสียเพียงอย่างเดียวของการใช้ชุดไอคอนนี้คือคุณไม่พบไอคอนแบรนด์ส่วนใหญ่

ไอคอนขนนก
Burak Özdemirเป็นผู้พัฒนาเว็บจากตุรกี เขาเชี่ยวชาญในการสร้างแอปพลิเคชันบนเว็บ
Burak Özdemirเป็นผู้พัฒนาเว็บจากตุรกี เขาเชี่ยวชาญในการสร้างแอปพลิเคชันบนเว็บ



(0)