خطوط الأيقونات: المبادئ الأساسية

خطوط الأيقونات هي أنواع خطوط تُستبدل فيها الحروف الرسومية — وهي عادةً الحروف والأرقام — برموز تصويرية. فبدلاً من رسم الحرف "A"، يُظهر خط الأيقونات رمز منزل أو مكبِّر بحث أو عربة تسوق.

ولأن الأيقونات تقطن داخل ملف الخط، فإنها تتصرف تماماً كالنص. يمكن تغيير حجمها إلى أي قيمة باستخدام font-size، وتغيير لونها عبر color، وإضافة ظلال النص، وتطبيق انتقالات CSS، بل وتحريكها — دون المساس بملف صورة واحد.

يُقدّم هذا الأسلوب عدة فوائد عملية:

• استقلالية الدقة — تتوسع الحواف المتجهة بحدة على أي كثافة شاشة
• حجم ضئيل — ملف خط مضغوط واحد يحل محل عشرات الصور المنفردة
• تحكم CSS — اللون والحجم والظل والتعتيم وحالات التمرير متوفرة مجاناً مع تنسيق النص
• طلب HTTP واحد — يُحمَّل مجموعة الأيقونات بأكملها في رحلة شبكة واحدة

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

حوالي عام 2012، شاعت مشاريع مثل Font Awesome وIcoMoon بديلاً أنظف: تغليف الأيقونات كحروف رسومية مرتبطة بمنطقة الاستخدام الخاص في Unicode. أصبح بإمكان المصممين تبديل مجموعة أيقونات كاملة بتغيير إعلان @font-face واحد، وأصبح بإمكان المطورين تنسيق الأيقونات بنفس CSS المستخدم للنص. انتشرت هذه التقنية بسرعة ولا تزال خياراً موثوقاً ومنخفض التكلفة لأنظمة التصميم التي تعتمد أيقونوغرافيا أحادية اللون.

ظل النقاش حول "خطوط الأيقونات مقابل SVG المضمّن" ثابتاً في مناقشات الواجهة الأمامية لأكثر من عقد. كلا الأسلوبين صالح — الاختيار الصحيح يعتمد على متطلبات مشروعك.

خطوط الأيقونات

• طلب HTTP واحد — ملف خط واحد يُوصّل كل أيقونة
• تنسيق CSS بالغ البساطة — غيّر color وfont-size وtext-shadow كأي نص
• أحادي اللون فقط — كل حرف رسومي يدعم لون تعبئة واحداً
• تكامل سهل — أضف رابط ورقة أنماط، استخدم فئة CSS، انتهى الأمر

SVG المضمّن

• متعدد الألوان — كل مسار يمكن أن يمتلك تعبئته الخاصة أو حده أو تدرجه
• إمكانية وصول افتراضية — تُوفّر <title> وaria-label دلالات حقيقية لقارئات الشاشة
• قابلية التخزين المؤقت بشكل فردي — الأيقونات غير المستخدمة لا تُحمَّل أبداً
• تحكم دقيق — تحريك مسارات فردية، تطبيق مرشحات لكل عنصر

صور SVG المتراكبة

• تجمع عدة ملفات SVG في صفحة متراكبة واحدة من عناصر <symbol>
• يُشار إلى الأيقونات بـ<use href="#icon-name">
• تجمع فوائد كلا الأسلوبين — طلب واحد، ألوان متعددة، إمكانية وصول — لكنها تتطلب خط أنابيب بناء أكثر تعقيداً

يمكن تغليف خطوط الأيقونات في خمسة تنسيقات ملفات، لكل منها ضغط وتوافق مع المتصفحات وحالات استخدام مختلفة. إليك مقارنة سريعة:

لست متأكداً من التنسيقات التي تضمّنها؟ استخدم هذا الدليل العملي لاتخاذ القرار:

• إذا اخترت واحداً فقط — استخدم WOFF2. يوفر أفضل ضغط (Brotli) ويغطي 97%+ من المتصفحات.
• إذا احتجت دعم IE 11 — استخدم WOFF2 + WOFF. يتولى WOFF المتصفحات المتبقية التي تفتقر إلى فك تشفير Brotli.
• إذا احتجت دعم IE 8 — استخدم WOFF2 + WOFF + EOT. EOT هو التنسيق الوحيد المفهوم من قِبَل Internet Explorer 6-8.
• لتطبيقات سطح المكتب — استخدم TTF. إنه التنسيق الأصلي لتصيير الخطوط على مستوى نظام التشغيل في Windows وmacOS وLinux.
• لتنقيح مشكلات الخطوط — افحص SVG Font. هيكله XML قابل للقراءة البشرية، مما يسهّل التحقق من مسارات الحروف الرسومية والبيانات الوصفية.

تعمق في كل تنسيق لفهم بنيته الداخلية وتوافقه مع المتصفحات وأفضل الممارسات:

تعرّف على كيفية استخدام هذه التنسيقات في مشاريعك: