7 نصائح خبراء حول أيقونة الويب تحدد الاستخدام والفوائد



هل تتساءل عن استخدام مجموعة أيقونات لموقع الويب الخاص بك وأيها تختار؟ قد تقنعك هذه النصائح الخبيرة للتو حول ما يعرفه بالفعل العديد من مطوري الويب المحترفين: من الأسهل بكثير البحث عن الرموز من مجموعة أيقونات مضمنة ، بدلاً من العثور على الرموز واحدة تلو الأخرى وإيجاد طريقة لجعلها متسقة إلى حد ما معًا.

لقد طلبنا من المجتمع أفضل نصائحهم حول استخدام مجموعات الأيقونات ، ووافق الكثير منهم على استخدام مجموعة أيقونات Font Awesome الشهيرة ، ولكن هذه ليست مجموعة الأيقونات الوحيدة المتاحة في السوق.

ما مجموعة الرموز التي تستخدمها؟ دعنا نعرف في التعليقات!

 هل تستخدم مجموعة أيقونات معينة لموقعك على الويب؟ هل تستخدم Font Awesome لاستخدام معين (أي مع Shopify ، للحصول على نشرة إخبارية ، ...)؟ إذا كان الأمر كذلك ، فلماذا تستخدمه ، وما هي تجربتك مع مجموعة الرموز؟ هل استخدمت CDN ، هل لاحظت أي تحسن لاستخدامك؟

جيف روشير: يضيف تصميماً بسيطاً لطيفاً يجده العملاء عصرياً وجذاباً

نحن نستخدم Font Awesome في eWorkOrders.com. إنه جزء من كل من موقعنا التسويقي وبرنامجنا كخدمة (SAAS) ، ونظام إدارة صيانة محوسب (CMMS). على موقعنا التسويقي ، يضيف تصميمًا بسيطًا لطيفًا يجده العملاء المحتملين حديثًا وجذابًا. لقد أضفنا حدودًا مثيرة للاهتمام وأحداث تمرير الماوس لجعلها أكثر تفاعلية وإثارة. بالنسبة لعملائنا ، يتم استخدام رموز Font Awesome كإشارة مرئية داخل حقول الإدخال للمساعدة في تحديد نوع البيانات التي يجب إدخالها ، مثل رمز التقويم في حقل التاريخ أو المغلف في حقل عنوان البريد الإلكتروني أو رمز الهاتف في حقل لرقم هاتف. يتم استخدامها على الأزرار الوظيفية ، مثل التحرير والنسخ والطباعة.

يتم استخدام الرموز لإعطاء معلومات مرئية سريعة حول البيانات مثل رمز تعجب أحمر بجوار أمر عمل متأخر أو عندما يحتاج شيء ما للانتباه. هم في أماكن أخرى قليلة فقط لجعل البرنامج يبدو أجمل ..

لقد كان Font Awesome رائعًا! CDN الخاص بهم سريع وهناك العديد من الخيارات لكل نوع مختلف من الأيقونات التي نحتاجها. لم نشعر بخيبة أمل من قبل.

جيف هو رئيس eWorkOrders.com. eWorkOrders هي أداة سهلة الاستخدام تعتمد على الويب من خلال CMMS والتي تساعد العملاء على إدارة طلبات الخدمة وأوامر العمل والأصول والصيانة الوقائية والمزيد.
جيف هو رئيس eWorkOrders.com. eWorkOrders هي أداة سهلة الاستخدام تعتمد على الويب من خلال CMMS والتي تساعد العملاء على إدارة طلبات الخدمة وأوامر العمل والأصول والصيانة الوقائية والمزيد.

راشيل فولي: طريقة معقولة للوصول إلى مكتبة أيقونات ضخمة بسهولة

في خريطة عملائي ، نعتمد بشكل كامل على Font Awesome في تصميم أيقوناتنا عبر جميع قنوات التسويق ومنتجاتنا بما في ذلك:

  • موقع الكتروني
  • رسائل البريد الإلكتروني
  • وسائل التواصل الاجتماعي
  • رسومات مخصصة
  • تطبيق جوال
  • التطبيق على شبكة الإنترنت

نستخدم Font Awesome لأنها طريقة ميسورة التكلفة للوصول إلى مكتبة أيقونات ضخمة بسهولة. الأسلوب أكثر على الجانب المرح الذي يتماشى مع علامتنا التجارية ؛ بالإضافة إلى أن القدرة على استخدام أوزان وأنماط مختلفة من الرموز تعطينا الحرية.

نحن نستخدم شبكة CDN لتطبيقاتنا مما يسمح بإحساس متسق للغاية عبر تجربة مستخدم المنتج. بالإضافة إلى ذلك - من السهل جدًا الترقية عند الحاجة. مع المواد التسويقية ، أصبحنا أكثر مرونة ونستخدم مزيجًا من CDN ، إصدارات التثبيت المحلية والمتجهات.

لطالما كانت FA موثوقة بالنسبة لنا منذ أن اعتمدنا بالكامل في يناير.

Rachel هي مصممة ويب ومقرها مدينة نيويورك ومتخصصة في تسويق المحتوى مع حملة لتعزيز العلامات التجارية B2B المتنامية وبناء نجاح تسويقي طويل المدى من خلال استراتيجية تحسين محركات البحث. وهي حاليًا في خريطة عملائي ، وهي شركة برمجيات مبيعات B2B تنشئ حلولًا لفرق المبيعات الميدانية.
Rachel هي مصممة ويب ومقرها مدينة نيويورك ومتخصصة في تسويق المحتوى مع حملة لتعزيز العلامات التجارية B2B المتنامية وبناء نجاح تسويقي طويل المدى من خلال استراتيجية تحسين محركات البحث. وهي حاليًا في خريطة عملائي ، وهي شركة برمجيات مبيعات B2B تنشئ حلولًا لفرق المبيعات الميدانية.

Andrew Ruditser: كما تمت ترقية Font Awesome ، قمنا بذلك أيضًا

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 ، تقدم منصتهم خيارين للمستخدمين. The First Options عبارة عن خدمة مجانية تقدم 1،588 رمزًا مجانيًا للاختيار من بينها. الخيار الثاني هو عضوية Pro ، والتي توفر 7،842 رمزًا. هذه الشركة لديها أيضًا ما نسميه ورقة الغش أيقونة. تعرض هذه القائمة جميع رموزها التي تقدمها Font Awesome ، والتي تخبرنا إذا كانت جزءًا من الحزمة المجانية أو الحزمة الاحترافية.

للإضافة ، يقدم Font Awesome أيضًا خيارًا لسحب الرمز من CDN الخاص بهم. نوصي بشدة الذهاب في طريقهم. يتمتع CDN بوقت استجابة سريع ، وليس لدينا سوى القليل من الفارق بين موقعنا ومنصتهم.

أندرو روديتسر ، منسق التكنولوجيا الرئيسي
أندرو روديتسر ، منسق التكنولوجيا الرئيسي

جيف روميرو: إنه يجعل سرعة الصفحة أسرع بكثير

نقوم بتطوير مواقع مخصصة على Wordpress لعملاء الشركات الصغيرة والمتوسطة. لقد استخدمنا تاريخياً صورًا لتمثيل أيقونات متنوعة على مواقعنا الإلكترونية تتراوح من ملفات تعريف الوسائط الاجتماعية إلى رموز الهاتف والبريد الإلكتروني. تتطلب عملية استخدام صورة للرموز العثور على مجموعة متسقة من الرموز ، وتحميلها ثم تغيير حجمها لضمان ملاءمتها للموقع.

على الرغم من كونه ملف صورة صغيرًا ، إلا أنه من عملية الحصول على مجموعة متسقة من الرموز وجعلها تتطابق مع قالب الموقع. الآن ، باستخدام Font Awesome ومكوّن Wordpress الإضافي الخاص به ، يمكننا استبدال الرموز بمجموعة متسقة من الوسائط التي تتطلب ببساطة نسخ / لصق سطر من HTML. والأفضل من ذلك ، أنه يمكن تغيير حجم الرموز باستخدام كمية صغيرة من CSS (باستخدام خاصية حجم الخط). يتم عرض الأيقونات بشكل أفضل من الأيقونة القائمة على الصور وهي مرئية بوضوح على الأجهزة المحمولة. أخيرًا ، نظرًا لأنه سطر من HTML بدلاً من ملف صورة ، فإنه يجعل سرعة الصفحة أسرع بكثير.

جيف روميرو هو المؤسس المشارك لشركة أوكتيف ديجيتال ، وهي وكالة تسويق رقمية متخصصة في استراتيجية تحسين محركات البحث المحلية والمؤسسة ، وإدارة إعلانات الدفع بالنقرة ، وتصميم / تطوير خدمات الويب ، وتحليلات التسويق.
جيف روميرو هو المؤسس المشارك لشركة أوكتيف ديجيتال ، وهي وكالة تسويق رقمية متخصصة في استراتيجية تحسين محركات البحث المحلية والمؤسسة ، وإدارة إعلانات الدفع بالنقرة ، وتصميم / تطوير خدمات الويب ، وتحليلات التسويق.

فانس: جيد بشكل خاص عندما لا يكون لديك مصمم في فريقك

بصفتي مطور ويب ، أستخدم Font Awesome كحل سريع للعديد من الرموز الرائعة. ومع ذلك ، فإن Font Awesome جيد بشكل خاص عندما لا يكون لديك مصمم في فريق التطوير الخاص بك. إنه مفيد لتطوير مكونات Wordpress الإضافية حيث يمكن للمطورين تضمينها في مكوناتهم الإضافية باستخدام CDNs الخاصة بـ Font Awesome في لمح البصر.

تجربتي مع Font Awesome جيدة حتى الآن. لكن هذا لا يعني أنه ليس لديه أي عيوب. واحدة من العوائق الواضحة هي سرعة تحميل الصفحة (الأداء). نظرًا لأنه حل سريع ، يجب عليك تضمين مجموعة كاملة من الرموز على الرغم من أنك تستخدم بعض الرموز فقط. يمكن أن يؤدي ذلك إلى تقليل سرعة تحميل موقع الويب ونتائج Google Page Speed ​​(PSI).

فانس ، مطور ويب ومالك ويب.
فانس ، مطور ويب ومالك ويب.

صني آشلي: بسيطة ونظيفة ويمكن التعرف عليها على الفور للزوار الجدد

نستخدم أيقونات Font Awesome في تذييل موقعنا. على وجه التحديد ، نستخدم أيقونات Facebook و Twitter و LinkedIn للإشارة إلى قنوات التواصل الاجتماعي الخاصة بنا. إنها بسيطة ونظيفة ويمكن التعرف عليها على الفور للزوار الجدد. كما يعرف المستخدمون الآخرون لـ Font Awesome ، فقد كانت أيضًا سريعة جدًا وسهلة التهيئة.

صني آشلي ، المؤسس والرئيس التنفيذي لشركة الفاتورة التلقائية. توفر الفاتورة التلقائية برامج إدارة المتاجر لمحلات تصليح السيارات والمرائب المستقلة.
صني آشلي ، المؤسس والرئيس التنفيذي لشركة الفاتورة التلقائية. توفر الفاتورة التلقائية برامج إدارة المتاجر لمحلات تصليح السيارات والمرائب المستقلة.

Burak Özdemir: أيقونات الريش لا تسبب حجم DOM مفرط

Feather Icons عبارة عن مجموعة من الرموز مفتوحة المصدر التي يمكن قراءتها وممتعة بصريًا والتي تم تصميمها وصيانتها بواسطة Cole Bemis. اعتبارًا من يونيو 2020 ، يتوفر أكثر من 280 رمزًا. جميع الرموز التي توفرها أيقونات Feather مرخصة من MIT ويمكن تنزيلها بشكل منفصل كملفات SVG. يمكنك تخصيص حجم الرمز ولون حد الرمز وعرض الحد على موقع أيقونة Feather قبل تنزيلها.

يمكن أن تكون أيقونات الريشة خيارًا رائعًا لموقعك على الويب أو مشروعك إذا كنت مطورًا أو تعرف كيفية التعامل مع بعض المهام الأمامية الأساسية. نظرًا لأنه يمكن أيضًا عرض هذه الرموز خفيفة الوزن بمكتبة JavaScript معيارية ، فإنها لا تسبب حجم DOM مفرط ، وهو مقياس يمكن أن يضر بأداء صفحة الويب الخاصة بك. وبالتالي ، باستخدام أيقونات Feather ، يمكنك خفض سرعة تحميل الصفحة أكثر مقارنة بالحزم الأخرى المتوفرة في السوق. الجانب السلبي الوحيد لاستخدام مجموعة الرموز هذه هو أنه لا يمكنك العثور على معظم رموز العلامة التجارية.

أيقونات الريش
Burak Özdemir هو مطور ويب من تركيا. وهو متخصص في إنشاء تطبيقات على شبكة الإنترنت.
Burak Özdemir هو مطور ويب من تركيا. وهو متخصص في إنشاء تطبيقات على شبكة الإنترنت.

Michel Pinson
عن المؤلف - Michel Pinson
ميشيل بينسون هو عشاق السفر ومبدع المحتوى. دمج الشغف بالتعليم والاستكشاف ، وقال انه ملموس لتبادل المعرفة وإلهام الآخرين من خلال جذب المحتوى التعليمي. جعل العالم أقرب إلى تمكين الأفراد ذوي الخبرة العالمية والشعور بالتجول.




تعليقات (0)

اترك تعليقا