HTML - Icons الأيقونات

-

الأيقونات في HTML (HTML Icons)

في HTML، يمكن استخدام مكتبات جاهزة لإضافة أيقونات جميلة وسهلة التخصيص مثل:

  • Font Awesome 🔥
  • Google Material Icons 🌟

✅ 1. استخدام Font Awesome:

Font Awesome توفر آلاف الأيقونات القابلة للتخصيص عبر CSS.

📦 تضمين Font Awesome:


<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

🔹 استخدام أيقونة:


<i class="fas fa-home"></i> الصفحة الرئيسية

⬅ fas تعني Font Awesome Solid، وfa-home هي اسم الأيقونة.

✅ 2. استخدام Google Material Icons:

Google تقدم مجموعة أيقونات حديثة باسم Material Icons يمكن استخدامها بسهولة.

📦 تضمين Google Icons:


<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

🔹 استخدام أيقونة:


<i class="material-icons">home</i>

⬅ النص داخل الوسم <i> هو اسم الأيقونة.

🎨 تخصيص الأيقونات باستخدام CSS:


<i class="fas fa-heart" style="color: red; font-size: 24px;"></i>

⬅ يمكنك تغيير اللون والحجم بكل سهولة باستخدام خصائص CSS.

💡 ملاحظات مهمة:

  • Font Awesome تتطلب إنترنت للعمل إلا إذا قمت بتحميل الملفات محليًا.
  • بعض الأيقونات متوفرة فقط في النسخة المدفوعة من Font Awesome.
  • Google Material Icons مجانية وسهلة الاستخدام.
  • يفضل استخدام الأيقونات كـ vector (مثل SVG أو font) لأنها أخف وأسهل في التخصيص.

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

C# - Arrays

-
C# - المصفوفات (Arrays) المصفوفة (Array) هي بنية بيانات تُستخدم لتخزين مجموعة من القيم من نفس النوع في مكان واحد بالذاكرة، ويتم الوصول إلى العناصر باستخدام رقم الفهرس (Index). 🔹 كيفية تعريف مصفوفة: // تعريف مصفوفة وتعيين قيم ابتدائية int[] numbers = { 1, 2, 3, 4, 5 }; // الوصول إلى العنصر الأول Console.WriteLine(numbers[0]); // النتيجة: 1 💡 ملاحظات: الفهرس يبدأ من 0، أي أول عنصر هو numbers[0] . يمكنك استخدام حلقة for أو foreach للتكرار على المصفوفة. يجب تحديد نوع البيانات التي ستحتويها المصفوفة. 🧪 مثال آخر: string[] fruits = new string[3]; fruits[0] = \"تفاح\"; fruits[1] = \"موز\"; fruits[2] = \"عنب\"; foreach (string fruit in fruits) { Console.WriteLine(fruit); } 📌 في هذا المثال، أنشأنا مصفوفة من ثلاث عناصر ومررنا عليها باستخدام foreach .
قراءة المزيد

Entity Framework - ما هو ORM؟ ونبذة عن Dapper وNHibernate

-
Entity Framework - ما هو ORM؟ ونبذة عن Dapper وNHibernate ORM هي اختصار لـ Object-Relational Mapping ، وتعني "الربط الكائني العلاقي". ببساطة، هي تقنية تُستخدم لربط الكائنات (Objects) في الكود مع الجداول (Tables) في قاعدة البيانات. 🔹 لماذا نحتاج إلى ORM؟ بدون ORM، نحتاج إلى كتابة استعلامات SQL يدوية والتعامل مع الكائنات بأنفسنا. بينما ORM توفر لنا طبقة وسيطة تقوم بتحويل الكود الكائني إلى استعلامات SQL تلقائيًا، والعكس أيضًا. 🔹 مزايا ORM تسريع التطوير. تقليل كمية الكود المكتوب. سهولة التعامل مع البيانات بشكل كائني. دعم التحقق من النوع (Type Checking) في وقت البرمجة. 🔹 عيوب ORM أداء أقل من SQL اليدوي في العمليات المعقدة. بعض المرونة تضيع بسبب التجريد العالي. 🔸 مقارنة بين EF Core وDapper وNHibernate التقنية النوع السهولة الأداء الدعم والانتشار Entity Framework Core ORM كامل سهل ومتكامل مع .NET متوسط مرتفع (مدعوم من Microsoft) ...
قراءة المزيد

Entity Framework - مقدمة عن Entity Framework

-
مقدمة عن Entity Framework 📜 لمحة تاريخية عن Entity Framework - أول إصدار من Entity Framework ظهر سنة 2008 كجزء من .NET Framework. - كان اسمه الرسمي ببساطة "Entity Framework"، ويعمل على ربط التطبيقات مع قواعد بيانات SQL بطريقة برمجية. - Entity Framework وفر وقتها أسلوبين رئيسيين للعمل: Database First ➔ إنشاء الكود انطلاقًا من قاعدة بيانات موجودة. Model First ➔ إنشاء قاعدة البيانات انطلاقًا من نموذج (Model) مرسوم. ✅ مع الوقت تطورت EF وتم إضافة أسلوب جديد يسمى Code First الذي أصبح من أكثر الطرق استخدامًا اليوم. 🔗 إصدارات Entity Framework قبل EF Core Entity Framework 1.0 (2008) - الإصدار الأول وكان محدود الإمكانيات. Entity Framework 4.0 (2010) - تحسينات كبيرة ودعم أفضل لـ POCO classes. Entity Framework 5.0 و6.0 (2012-2013) - دعم مميزات متقدمة مثل Migrations وتحسين الأداء. 💡 ملاحظة: لم يكن هناك EF 2.0 أو EF 3.0 رسميًا. 🚀 لماذا تم تطوير Entity Framework Core؟ مع ظهور .NET Core، احتاجت مايكروسوفت إلى نسخة خفيفة وعصرية م...
قراءة المزيد