مولّد CSS Sprite
اجمع عدة أيقونات في sprite sheet واحدة بصيغة PNG واحصل على شيفرة CSS background-position الجاهزة للصق لعرض كل أيقونة على حدة في موقعك.
كيف يعمل
تجمع CSS Sprite عدة أيقونات في ملف صورة واحد لتقليل عدد طلبات الشبكة في موقع الويب. توضع كل أيقونة مستوردة في خلية بحجم ثابت ضمن شبكة، وتولّد الأداة تلقائيًا فئة CSS لكل أيقونة مع الخاصية background-position التي تشير إلى موضعها الدقيق في الشبكة.
كيف أستخدم شيفرة CSS المولّدة؟
نزّل ملف PNG وضعه بجوار ملف الأنماط باسم sprite.png (أو عدّل الرابط في CSS)، وانسخ شيفرة CSS المولّدة إلى ملفك، ثم طبّق الفئة المقابلة (مثل class="icon icon-mon-icone") على عنصر HTML مثل span.
من أين تأتي أسماء فئات CSS؟
يُشتق اسم كل فئة تلقائيًا من اسم ملف الأيقونة (بأحرف صغيرة، مع استبدال المسافات والأحرف الخاصة بشرطات). وعند التكرار يُضاف رقم للحفاظ على أسماء فريدة.
يتم إنشاء الـ sprite وشيفرة CSS بالكامل داخل متصفحك: لا تُرسل أيقوناتك إلى أي خادم أبدًا.