51 lines
2.5 KiB
Markdown
51 lines
2.5 KiB
Markdown
|
---
|
|||
|
|
title: Icons
|
|||
|
|
localeTitle: الرموز
|
|||
|
|
---
|
|||
|
|
## الرموز
|
|||
|
|
|
|||
|
|
يوفر لك إطار Bootstrap Glyphicons للرمز. لا يتضمن Bootstrap مكتبة الرموز افتراضيًا ، ولكنه يحتوي على مجموعة من التوصيات لتختار منها. في حين أن معظم مجموعات الرموز تتضمن تنسيقات ملفات متعددة ، إلا أننا نفضل تطبيقات SVG لتحسين إمكانية الوصول والدعم المتجه.
|
|||
|
|
|
|||
|
|
### كيف تستعمل
|
|||
|
|
|
|||
|
|
لاستخدام رمز Bootstrap ، أنشئ علامة span مع `glyphicon` الفئة الأساسية وفئة `glyphicon` الفردية. استخدمها فقط على العناصر التي لا تحتوي على محتوى نصي ولا تحتوي على عناصر فرعية.
|
|||
|
|
|
|||
|
|
**مثال الكود:**
|
|||
|
|
|
|||
|
|
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
|
|||
|
|
|
|||
|
|
`<span class="glyphicon glyphicon-cog"></span>`
|
|||
|
|
|
|||
|
|
يوفر لك إطار Bootstrap أكثر من 250 رمزًا تسمى الحروف الرسومية. أنها تأتي في تنسيق الخط من مجموعة Glyphicon Halflings.
|
|||
|
|
|
|||
|
|
### كيف تستعمل
|
|||
|
|
|
|||
|
|
لاستخدام رموز bootstrap ، يمكنك ببساطة إنشاء علامة `<span>` وتطبيق فئة CSS المناسبة للأيقونة. تم توفير مثال على التعليمات البرمجية أدناه.
|
|||
|
|
|
|||
|
|
**مثال الكود:**
|
|||
|
|
|
|||
|
|
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
|
|||
|
|
|
|||
|
|
### Bootstrap Glyphicon Class List
|
|||
|
|
|
|||
|
|
هذا مثال على فئات CSS التي يوفرها bootstrap من أجل glyphicons. أكثر منهم متاح [هنا](https://getbootstrap.com/docs/3.3/components/#glyphicons)
|
|||
|
|
|
|||
|
|
`.glyphicon glyphicon-plus` هذا هو رمز إضافة / إضافة bootstrap.
|
|||
|
|
|
|||
|
|
`.glyphicon glyphicon-trash` هذا هو رمز سلة المهملات / حذف bootstrap.
|
|||
|
|
|
|||
|
|
_ملاحظة: لا تقم بتضمين النقطة في سمة فئة HTML ، يتم استخدام الإشارة إلى الفئات ذات النقطة فقط عند ضبط الفئات في CSS._
|
|||
|
|
|
|||
|
|
### أيقونة Bootstrap في الأزرار
|
|||
|
|
|
|||
|
|
`
|
|||
|
|
<button type="button" class="btn btn-default" aria-label="Left Align">
|
|||
|
|
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
|
|||
|
|
</button>
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
_ملاحظة: رمز Glyphicons الخاص ب Bootstrap غير متوفر على bootstrap V4_
|
|||
|
|
|
|||
|
|
### معلومات اكثر:
|
|||
|
|
|
|||
|
|
* [Bootstrap Glyphicons Icons Doc](https://getbootstrap.com/docs/3.3/components/#glyphicons)
|