الأيقونات عنصر بصري مهم في تصميم المواقع يجعل القوائم أكثر وضوحًا وجاذبية. في قالب مهارتي يمكن تخصيص القوائم بسهولة وإضافة أيقونات احترافية. في هذه المقالة سنستعرض كيفية اختيار الأيقونات باستخدام حزمة Phosphor Icons، وتطبيقها خطوة بخطوة في متجر لوني. أولًا/لماذا الأيقونات مهمة؟
- تمنح القوائم مظهرًا احترافيًا أنيقًا.
- تساعد الزائر على التعرّف على أقسام الموقع بسرعة.
- تضيف قيمة بصرية وتعزز هوية المتجر.
ثانيًا/ أهم معايير اختيار الأيقونات لمتجرك التناسق الأسلوبي: اختر أيقونات من نفس الحزمة وبنفس الوزن. الوضوح والدلالة الصحيحة: الأيقونة تكون واضحة وتعبر عن القسم. القابلية للتخصيص: إمكانية تغيير اللون أو الحجم بسهولة لتناسب هوية المتجر. البساطة: أيقونات أنيقة وغير معقدة حتى تبقى تجربة المستخدم مريحة. ثالثًا/مصدر الأيقونات تتوفر العديد من المواقع التي تقدم مكتبات أيقونات احترافية (بعضها مجاني وبعضها مدفوع). في متجر لوني اخترنا مكتبة Phosphor Icons لما توفره من بساطة ووضوح، وكانت النتيجة قائمة أنيقة ومنسجمة مع هوية المتجر. رابعًا/ خطوات تطبيق الأيقونات في قائمة قالب مهارتي (تنفيذ على متجر لوني)
- الدخول على مكتبة الأيقونات
افتح موقع https://phosphoricons.com في مربع البحث، اكتب اسم الأيقونة التي تحتاجها (مثلاً: cup أو book).
- تخصيص الأيقونة ونسخها
بعد ظهور الأيقونة اخترها ثم من الأعلى حدد الشكل المناسب (خط رفيع، ممتلئ، أو عادي...).
غيّر الحجم أو اللون حسب رغبتك، من القائمة في الأعلى.
أخيرًا اضغط على زر نسخ رابط الأيقونة (Copy).
- إضافة الأيقونة في لوحة التحكم
من لوحة تحكم ووردبريس لمتجرك ادخل على: المظهر › القوائم.
اختر القائمة التي ترغب في تعديلها. افتح عنصر القائمة المراد إضافة الأيقونة له، اضغط على السهم الصغير.
ألصق رابط الأيقونة في الحقل المناسب. ثم اضغط على حفظ القائمة.
افتح واجهة المتجر وتأكد أن الأيقونة ظهرت بالشكل الصحيح.
النتيجة كانت قائمة أكثر وضوحًا، أنيقة ومعبّرة لهوية المتجر. الخلاصة: إضافة أيقونات للقائمة في قالب مهارتي لا تحتاج سوى خطوات بسيطة: بحث > نسخ >لصق. التجربة في متجر لوني أثبتت أن اختيار الأيقونات المناسبة يضيف قيمة جمالية ويجعل التصفح أكثر سهولة. وإذا أردت الاطلاع على النتيجة بنفسك، يمكنك زيارة متجر لوني ومشاهدة كيف أصبحت القوائم أكثر أناقة وحيوية.
