أيقونات Bootstrap والطباعة

<!-- رابط CDN (الطريقة الأسهل) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"> <!-- التثبيت عبر NPM --> npm install bootstrap-icons <!-- استخدام SVG Sprites --> <svg class="bi" width="32" height="32" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#heart-fill"/> </svg> <!-- خطوط الأيقونات (بعد التثبيت) --> <i class="bi bi-heart-fill"></i>

<!-- الأيقونات الأساسية --> <i class="bi bi-heart"></i> <i class="bi bi-heart-fill"></i> <i class="bi bi-star"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-person"></i> <i class="bi bi-person-fill"></i> <i class="bi bi-envelope"></i> <i class="bi bi-envelope-fill"></i> <i class="bi bi-cart"></i> <i class="bi bi-cart-fill"></i> <!-- أيقونات واجهة المستخدم الشائعة --> <i class="bi bi-house"></i> <i class="bi bi-search"></i> <i class="bi bi-bell"></i> <i class="bi bi-gear"></i> <i class="bi bi-list"></i> <i class="bi bi-x"></i> <i class="bi bi-check"></i> <i class="bi bi-chevron-right"></i> <i class="bi bi-chevron-down"></i> <i class="bi bi-arrow-right"></i> <!-- أيقونات وسائل التواصل الاجتماعي --> <i class="bi bi-facebook"></i> <i class="bi bi-twitter"></i> <i class="bi bi-instagram"></i> <i class="bi bi-linkedin"></i> <i class="bi bi-github"></i> <i class="bi bi-youtube"></i>

<!-- استخدام فئات حجم الخط --> <i class="bi bi-heart fs-1"></i> <!-- كبير جداً --> <i class="bi bi-heart fs-2"></i> <!-- كبير --> <i class="bi bi-heart fs-3"></i> <!-- متوسط كبير --> <i class="bi bi-heart fs-4"></i> <!-- متوسط --> <i class="bi bi-heart fs-5"></i> <!-- صغير --> <i class="bi bi-heart fs-6"></i> <!-- صغير جداً --> <!-- استخدام الأنماط السطرية --> <i class="bi bi-star" style="font-size: 2rem;"></i> <i class="bi bi-star" style="font-size: 3rem;"></i> <i class="bi bi-star" style="font-size: 4rem;"></i> <!-- استخدام CSS مخصص --> <style> .icon-xs { font-size: 0.75rem; } .icon-sm { font-size: 1rem; } .icon-md { font-size: 1.5rem; } .icon-lg { font-size: 2rem; } .icon-xl { font-size: 3rem; } </style> <i class="bi bi-heart icon-lg"></i> <!-- أيقونات SVG بالعرض/الارتفاع --> <svg class="bi" width="16" height="16" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#heart"/> </svg> <svg class="bi" width="32" height="32" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#heart"/> </svg>

<!-- استخدام أدوات لون النص --> <i class="bi bi-heart text-danger"></i> <i class="bi bi-star text-warning"></i> <i class="bi bi-check-circle text-success"></i> <i class="bi bi-info-circle text-primary"></i> <i class="bi bi-exclamation-triangle text-warning"></i> <!-- استخدام الأنماط السطرية --> <i class="bi bi-heart" style="color: #ff6b6b;"></i> <i class="bi bi-star" style="color: #ffd93d;"></i> <!-- أيقونات مع خلفية --> <span class="bg-primary text-white rounded-circle p-2"> <i class="bi bi-bell"></i> </span> <span class="bg-success text-white rounded p-2"> <i class="bi bi-check"></i> </span> <!-- أيقونات متدرجة --> <i class="bi bi-heart" style="background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i> <!-- أيقونة مع ظل --> <i class="bi bi-star text-warning" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.2);"></i> <!-- الشفافية --> <i class="bi bi-heart text-danger opacity-75"></i> <i class="bi bi-heart text-danger opacity-50"></i> <i class="bi bi-heart text-danger opacity-25"></i>

<!-- أزرار مع أيقونات --> <button class="btn btn-primary"> <i class="bi bi-download"></i> تحميل </button> <button class="btn btn-success"> <i class="bi bi-check-circle"></i> تأكيد </button> <button class="btn btn-danger"> <i class="bi bi-trash"></i> حذف </button> <!-- أزرار بأيقونات فقط --> <button class="btn btn-primary"> <i class="bi bi-search"></i> </button> <button class="btn btn-outline-secondary"> <i class="bi bi-heart"></i> </button> <!-- أزرار أيقونات دائرية --> <button class="btn btn-primary rounded-circle" style="width: 40px; height: 40px;"> <i class="bi bi-plus"></i> </button> <!-- مجموعة أزرار مع أيقونات --> <div class="btn-group" role="group"> <button class="btn btn-outline-primary"><i class="bi bi-align-left"></i></button> <button class="btn btn-outline-primary"><i class="bi bi-align-center"></i></button> <button class="btn btn-outline-primary"><i class="bi bi-align-right"></i></button> </div> <!-- روابط مع أيقونات --> <a href="#" class="text-decoration-none"> <i class="bi bi-arrow-right"></i> اعرف المزيد </a> <a href="#" class="text-danger"> <i class="bi bi-heart-fill"></i> أضف إلى المفضلة </a> <!-- روابط وسائل التواصل الاجتماعي --> <div class="d-flex gap-3"> <a href="#" class="text-primary fs-4"><i class="bi bi-facebook"></i></a> <a href="#" class="text-info fs-4"><i class="bi bi-twitter"></i></a> <a href="#" class="text-danger fs-4"><i class="bi bi-instagram"></i></a> </div>

<!-- سطري مع النص --> <p> <i class="bi bi-check-circle text-success"></i> تم إكمال المهمة بنجاح </p> <p> <i class="bi bi-exclamation-triangle text-warning"></i> رسالة تحذير </p> <!-- استخدام Flexbox لمحاذاة أفضل --> <div class="d-flex align-items-center gap-2"> <i class="bi bi-info-circle text-primary"></i> <span>رسالة معلومات مع أيقونة محاذاة تماماً</span> </div> <!-- قائمة مع أيقونات --> <ul class="list-unstyled"> <li class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-check text-success"></i> <span>الميزة الأولى</span> </li> <li class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-check text-success"></i> <span>الميزة الثانية</span> </li> <li class="d-flex align-items-center gap-2 mb-2"> <i class="bi bi-check text-success"></i> <span>الميزة الثالثة</span> </li> </ul> <!-- تنبيه مع أيقونة --> <div class="alert alert-info d-flex align-items-center" role="alert"> <i class="bi bi-info-circle fs-4 me-2"></i> <div>هذه رسالة معلومات مع أيقونة.</div> </div> <!-- بطاقة مع رأس أيقونة --> <div class="card"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <i class="bi bi-lightning-charge text-warning fs-3 me-2"></i> <h5 class="card-title mb-0">أداء سريع</h5> </div> <p class="card-text">اختبر سرعات فائقة.</p> </div> </div>

<!-- زخرفة النص --> <p class="text-decoration-none">بدون زخرفة نص</p> <p class="text-decoration-underline">نص مسطر</p> <p class="text-decoration-line-through">نص مشطوب</p> <!-- ارتفاع الخط --> <p class="lh-1">ارتفاع الخط 1</p> <p class="lh-sm">ارتفاع خط صغير</p> <p class="lh-base">ارتفاع خط أساسي</p> <p class="lh-lg">ارتفاع خط كبير</p> <!-- وزن الخط --> <p class="fw-light">نص خفيف</p> <p class="fw-lighter">نص أخف</p> <p class="fw-normal">نص عادي</p> <p class="fw-bold">نص عريض</p> <p class="fw-bolder">نص أكثر عرضاً</p> <!-- نمط الخط --> <p class="fst-italic">نص مائل</p> <p class="fst-normal">نص بنمط عادي</p> <!-- خط أحادي المسافة --> <p class="font-monospace">هذا بخط أحادي المسافة</p> <code class="font-monospace">const x = 10;</code> <!-- تباعد الأحرف (يتطلب CSS مخصص) --> <style> .ls-tight { letter-spacing: -0.05em; } .ls-normal { letter-spacing: 0; } .ls-wide { letter-spacing: 0.1em; } </style> <p class="ls-wide">م ت ب ا ع د و ا س ع</p>

<!-- تغليف النص --> <div class="text-wrap" style="width: 200px;"> سيلتف هذا النص بشكل طبيعي داخل عرض الحاوية. </div> <div class="text-nowrap"> لن يلتف هذا النص وقد يتجاوز الحاوية. </div> <!-- اقتطاع النص --> <div class="text-truncate" style="max-width: 200px;"> هذا النص طويل جداً وسيتم اقتطاعه بنقاط حذف... </div> <!-- كسر الكلمة --> <p class="text-break"> كلمةطويلةجداًستنكسرإذالزمالأمرلتلائمعرضالحاويةالوالدة </p> <!-- المسافة البيضاء --> <div style="white-space: pre;"> هذا يحافظ على التباعد وفواصل الأسطر </div> <div style="white-space: pre-wrap;"> هذا يحافظ على التباعد ولكن يلتف عند حافة الحاوية </div> <div style="white-space: pre-line;"> هذا يطوي المسافات المتعددة ولكن يحافظ على فواصل الأسطر </div> <!-- مثال عملي: عنوان بطاقة مقتطع --> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title text-truncate"> هذا عنوان بطاقة طويل جداً يحتاج إلى اقتطاع </h5> <p class="card-text">محتوى البطاقة هنا.</p> </div> </div>

<!-- بطاقات الميزات مع الأيقونات --> <div class="row g-4"> <div class="col-md-4"> <div class="card text-center"> <div class="card-body"> <i class="bi bi-lightning-charge text-warning" style="font-size: 3rem;"></i> <h5 class="card-title mt-3">سريع</h5> <p class="card-text">أداء فائق السرعة</p> </div> </div> </div> <div class="col-md-4"> <div class="card text-center"> <div class="card-body"> <i class="bi bi-shield-check text-success" style="font-size: 3rem;"></i> <h5 class="card-title mt-3">آمن</h5> <p class="card-text">أمان على مستوى البنوك</p> </div> </div> </div> <div class="col-md-4"> <div class="card text-center"> <div class="card-body"> <i class="bi bi-phone text-primary" style="font-size: 3rem;"></i> <h5 class="card-title mt-3">متجاوب</h5> <p class="card-text">يعمل على جميع الأجهزة</p> </div> </div> </div> </div> <!-- قسم الإحصائيات --> <div class="row text-center"> <div class="col-md-3"> <i class="bi bi-people-fill text-primary fs-1"></i> <h3 class="mt-2">10,000+</h3> <p class="text-muted">مستخدم سعيد</p> </div> <div class="col-md-3"> <i class="bi bi-download text-success fs-1"></i> <h3 class="mt-2">50,000+</h3> <p class="text-muted">تحميل</p> </div> <div class="col-md-3"> <i class="bi bi-star-fill text-warning fs-1"></i> <h3 class="mt-2">4.9/5</h3> <p class="text-muted">التقييم</p> </div> <div class="col-md-3"> <i class="bi bi-trophy-fill text-warning fs-1"></i> <h3 class="mt-2">15+</h3> <p class="text-muted">جوائز مكتسبة</p> </div> </div> <!-- التنقل مع الأيقونات --> <nav class="nav nav-pills nav-fill"> <a class="nav-link active" href="#"> <i class="bi bi-house-door"></i> الرئيسية </a> <a class="nav-link" href="#"> <i class="bi bi-person"></i> الملف الشخصي </a> <a class="nav-link" href="#"> <i class="bi bi-gear"></i> الإعدادات </a> </nav>