🌟 مقدمة تحفيزية :
“أهلاً بك يا فنان الكود! هل لاحظت أن المواقع الاحترافية تستخدم أيقونة (🏠) بجانب كلمة الرئيسية ، أو (📧) بجانب اتصل بنا ؟ الأيقونات ليست مجرد زينة ، بل هي أدلة بصرية تجعل تجربة المستخدم أسرع وأجمل . اليوم ، في آخر محطات رحلتنا في عالم التصميم (CSS) ، سنتعلم كيف نضيف آلاف الأيقونات الاحترافية لموقعك بضغطة زر ، لنختم هذه الوحدة بمشروع متكامل ينبض بالاحترافية !”
🏗️ 1. ما هي مكتبة Font Awesome ؟ هي المكتبة الأشهر عالمياً التي توفر آلاف الأيقونات (مثل أيقونات التواصل الاجتماعي ، الأسهم ، القلوب ، وغيرها) كأنها “خطوط” يمكنك التحكم في لونها وحجمها بسهولة .
🔗 2. كيف نربط الأيقونات بموقعنا ؟ نضع هذا الرابط السريع (CDN) داخل وسم <head> في ملف الـ HTML :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
💻 3. التطبيق العملي (كيف تضع الأيقونة؟) استخدام الأيقونات سهل جداً، نستخدم وسم مع الكلاس الخاص بالأيقونة :
<p><i class="fas fa-home"></i> الرئيسية</p> <p><i class="fas fa-envelope"></i> راسلنا عبر البريد</p> <p><i class="fab fa-whatsapp"></i> تواصل معنا واتساب</p>
🎨 4. تنسيق الأيقونات بـ CSS بما أنها تُعامل كـ “نصوص”، يمكنك تغيير لونها وحجمها ببساطة :
i {
color: #e67e22; /* لون الأكاديمية */
font-size: 24px;
margin-left: 10px;
}
🎓 مسك الختام :
ماذا أنجزت في هذه الوحدة ؟
يا بطل “أكاديمية قياوي” ، انظر خلفك لترى حجم الإنجاز :
• بدأت بصفحة بيضاء ، والآن تملك موقعاً ملوناً ومنسقاً .
• تعلمت Flexbox و Grid لتوزيع العناصر كالمحترفين .
• بنيت Navbar احترافي و Landing Page جذابة .
• استخدمت Bootstrap لتسريع عملك و Font Awesome لتجميله .
• والأهم.. أن موقعك أصبح منشوراً على الإنترنت يراه الجميع !
🎯 التحدي النهائي (مشروع مسك الختام) :
“قم بإضافة أيقونات لروابط القائمة العلوية (Navbar) ولأزرار التواصل في أسفل الصفحة (Footer) . بمجرد الانتهاء، حدث موقعك على Netlify وأرسل لنا الرابط النهائي لنحتفل بتخرجك من المستوى المتوسط !
للتوضيح :
الأيقونات تجعل الموقع يبدو احترافياً مثل مواقع الشركات . أشهر مكتبة أيقونات في العالم هي: Font Awesome 
تستعمل لتمثيل : الهاتف ، البريد ، الدورات ، المستخدم ، الشبكات الاجتماعية . 🟢 الخطوة 1 : إضافة المكتبة داخل <head> في ملف index.html انسخ هذا السطر :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
🟢 الخطوة 2 : استعمال الأيقونة مثال :
<i class="fa-solid fa-code"></i>
تعطيك أيقونة البرمجة . 🟢 مثال داخل بطاقة
<div class="card"> <i class="fa-solid fa-laptop-code"></i> <h3>تعلم البرمجة</h3> <p>ابدأ تعلم HTML و CSS بسهولة</p> </div>
🟢 تغيير حجم الأيقونة
i{
font-size:40px;
color:#2c7be5;
}
🧠 لماذا الأيقونات مهمة ؟ ✔ تجعل التصميم جميلاً ✔ تساعد على فهم المحتوى بسرعة ✔ تجعل الموقع احترافياً
🟢 الخاتمة النهائية للدورة
🎓 خاتمة الدورة:
رحلتك بدأت الآن هنيئاً لك ! لقد وصلت إلى نهاية هذه الدورة . خلال هذه الرحلة تعلمنا معاً أساسيات تصميم المواقع خطوة بخطوة ، بدءاً من فهم لغة HTML ، ثم تنسيق الصفحات باستخدام CSS ، وصولاً إلى تصميم موقع كامل يعمل على مختلف الأجهزة . تعلمنا أيضاً كيفية :
- إنشاء صفحات ويب منظمة
- تصميم مواقع جميلة ومتجاوبة (Responsive)
- استعمال Flexbox و Grid لتنظيم العناصر
- إنشاء قائمة تنقل احترافية (Navbar)
- تصميم صفحة هبوط (Landing Page)
- نشر الموقع على الإنترنت
- استعمال Bootstrap لتحسين التصميم
- إضافة أيقونات احترافية للموقع
لكن تذكر أن نهاية هذه الدورة ليست نهاية التعلم، بل هي بداية طريقك في عالم تطوير الويب. أفضل طريقة لتطوير مهاراتك هي:
- إنشاء مواقع صغيرة
- تجربة أفكار جديدة
- تحليل مواقع احترافية ومحاولة تقليدها
استمر في التعلم والتجربة ، فكل مشروع جديد سيجعلك أقرب إلى الاحتراف . أتمنى لك التوفيق في رحلتك التقنية . Qiyaoui Academy