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

-

CSS - الأيقونات (Icons)

🔸 تُستخدم الأيقونات في مواقع الويب لتوضيح المعنى أو الوظيفة بطريقة مرئية. يمكنك إضافة الأيقونات باستخدام مكتبات خارجية مثل:

  • Font Awesome
  • Bootstrap Icons
  • Google Material Icons

✅ استخدام Font Awesome

لإضافة Font Awesome، يجب أولًا تضمين ملف CSS من CDN:


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

ثم استخدم كود HTML للأيقونة:


<i class="fa-solid fa-house"></i>

✅ استخدام Bootstrap Icons

مكتبة Bootstrap Icons تحتوي على العديد من الأيقونات:


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

استخدم الأيقونات كالتالي:


<i class="bi bi-alarm"></i>

✅ استخدام Google Material Icons

من أشهر مكتبات الأيقونات وتُستخدم على نطاق واسع:


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


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

📌 ملاحظات مهمة

  • يمكنك تخصيص حجم الأيقونات باستخدام CSS مثل: font-size.
  • يمكن تغيير لون الأيقونة بسهولة باستخدام خاصية color.
  • يفضل دائمًا تحميل مكتبة الأيقونات من CDN موثوق لتسريع تحميل الصفحة.

🧪 مثال على تخصيص الأيقونة


i {
  font-size: 24px;
  color: #007BFF;
}

تعليقات

إرسال تعليق

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

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) ...
قراءة المزيد

1.1 SQL Introduction

-
SQL Introduction – مقدمة في SQL  ما هي SQL؟ SQL هي اختصار لـ Structured Query Language (لغة الاستعلام البنيوية). SQL تُستخدم للوصول إلى قواعد البيانات والتحكم فيها ( access and manipulate databases ). SQL تعتبر معيارًا معتمدًا من ANSI (المعهد القومي الأمريكي للمعايير).  ماذا يمكن أن تفعل SQL؟ SQL يمكنها تنفيذ الاستعلامات على قاعدة البيانات ( execute queries against a database ). SQL يمكنها استرجاع البيانات من قاعدة البيانات ( retrieve data from a database ). SQL يمكنها إدخال سجلات في قاعدة البيانات ( insert records in a database ). SQL يمكنها تحديث السجلات في قاعدة البيانات ( update records in a database ). SQL يمكنها حذف السجلات من قاعدة البيانات ( delete records from a database ). SQL يمكنها إنشاء قواعد بيانات جديدة ( create new databases ). SQL يمكنها إنشاء جداول جديدة داخل قاعدة البيانات ( create new tables in a database ). SQL يمكنها إنشاء إجراءات مخزنة ( stored procedures ) داخل قاعدة البيانات. SQL يمكنها إنشاء عروض...
قراءة المزيد