English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل أساسي لـ Bootstrap

إضافات Bootstrap

رموز الأيقونات النصية Glyphicons في Bootstrap

في هذا الفصل سنناقش الأيقونات النصية (Glyphicons) و نتعرف على استخدامها من خلال بعض الأمثلة. يحتوي Bootstrap على أكثر من 200 نموذج من نماذج الخطوط.

ما هي الأيقونات النصية؟

الأيقونات النصية هي أنواع الخطوط المستخدمة في مشاريع الويب. ومع ذلك،Glyphicons Halflings يحتاج إلى ترخيص تجاري، ولكن يمكنك استخدام هذه الأيقونات مجانًا بناءً على مشروع Bootstrap.

لإظهار تقديرنا للمطورين الأيقونات، نرجو إضافة رابط موقع GLYPHICONS عند استخدام هذه الأيقونات.

الحصول على الأيقونات النصية

لقد قمنا ب تثبيت البيئة لقد قمت بتنزيل نسخة Bootstrap 3.x و فهمت بنية مجلداتها. fonts يمكن العثور على الأيقونات النصية في مجلد، ويشمل الملفات التالية:

  • glyphicons-halflings-regular.eot

  • glyphicons-halflings-regular.svg

  • glyphicons-halflings-regular.ttf

  • glyphicons-halflings-regular.woff

قواعد CSS ذات الصلة مكتوبة في dist مجلد css في مجلد bootstrap.css و bootstrap-min.css على الملف.

قائمة الأيقونات النصية

انقر هنا لرؤية قائمة الأيقونات النصية المتاحة.

توضيح قواعد CSS

قواعد CSS التالية تشكل فئة glyphicon.

النتيجة كما يلي:

شريط التنقل ببطاقات الرسومية

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>导航栏的字形图标</title>
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1.0">
　　　　<!--　Bootstrap　-->
　　　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<style>
　body　{
	padding-top:　50px;
　　　　padding-left:　50px;
}
</style>
<![if　lt　IE　9]>
	<script　src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div　class="navbar　navbar-fixed-top　navbar-inverse"　role="navigation">
	<div　class="container">
		<div　class="navbar-header">
			<button　type="button"　class="navbar-toggle"　data-toggle="collapse"　data-target=".navbar-collapse">
				<span　class="sr-only">Toggle　navigation</span>
				<span　class="icon-bar"></span>
				<span　class="icon-bar"></span>
				<span　class="icon-bar"></span>
			</button>
			<a　class="navbar-brand"　href="#">Project　name</a>
		</div>
		<div　class="collapse　navbar-collapse">
			<ul　class="nav　navbar-nav">
				<li　class="active"><a　href="#"><span　class="glyphicon　glyphicon-home"></span>　Home</a></li>
				<li><a　href="#shop"><span　class="glyphicon　glyphicon-shopping-cart"></span>　المتجر</a></li>
				<li><a　href="#support"><span　class="glyphicon　glyphicon-headphones"></span>　الدعم</a></li>
			</ul>
		</div><!--　/.nav-collapse　-->
	</div><!--　/.container　-->
</div>
<!--　jQuery　(يحتاج إلى التضمين للوحدات المضمنة Bootstrap)　-->
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--　شامل جميع الوحدات المضمنة　-->
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
اختبار لرؤية ‹/›

تحديد شعار الخط

لقد رأينا كيفية استخدام شعار الخط، ونتيجة لذلك، دعنا نرى كيفية تحديد شعار الخط.

سنبدأ بالعينة السابقة، ونقوم بتحديد الشعار عبر تغيير حجم الخط، ولون الخط وتطبيق بلاط النص.

هناك الكود البدءي:

<button　type="button">
　　<span></span> مستخدم
</button>

النتيجة كما يظهر أدناه:


تحديد حجم الخط

من خلال زيادة أو تقليل حجم الخط للشعار، يمكنك جعله أكبر أو أصغر.

<button　type="button"　style="font-size:　60px">
　　<span></span> مستخدم
</button>


تحديد لون الخط

<button　type="button"　style="color:　rgb(212,　106,　64);">
　　<span></span> مستخدم
</button>

تطبيق بلاط النص

<button　type="button"　style="text-shadow:　black　5px　3px　3px;">
　　<span></span> مستخدم
</button>

تحديد شعار الخط عبر الإنترنت

انقر هنا، لتحديد شعار الخط →

قائمة الشعارات

الشعاراسم النوعالمثال

الإشارة-للمثلثجربها

الإشارة-للمزيدجربها

الإشارة-للمينوسجربها

الإشارة-للإيوروجربها

الإشارة-للباروقاجربها

الإشارة-للمستندجربها

الإشارة-للمقارنةجربها

الإشارة-للزجاججربها

الإشارة-للموسيقىجربها

الإشارة-للبحثجربها

الإشارة-للمحبةجربها

الإشارة-للميزةجربها

الإشارة-للميزة-الفراغيةجربها

الإشارة-للمستخدمجربها

الإشارة-للمواد-السينمائيةجربها

الإشارة-للمحتويات-المكبرةجربها

الإشارة-للمحتويات-البسيطةجربها

الإشارة-للمحتوياتجربها

الإشارة-للموافقةجربها

الإشارة-للإزالةجربها

الإشارة-للتحجيمجربها

الإشارة-للتقريبجربها

الإشارة-للإطفاءجربها

الإشارة-للإشارةجربها

الإشارة-للسيناريوجربها

الإشارة-للمفتاحجربها

الإشارة-للحذفجربها

الإشارة-للمنزلجربها

الإشارة-للملفجربها

الإشارة-للمعرفةجربها

الإشارة-للطريقجربها

الإشارة-للتحميل-البديلجربها

الإشارة-للتحميلجربها

الإشارة-للمستودعجربها

الإشارة-للعب-الدائريجربها

الإشارة-الغير-مكررةجربها

الرمز الديناميكي glyphicon glyphicon-refreshجربها

الرمز الديناميكي glyphicon glyphicon-list-altجربها

الرمز الديناميكي glyphicon glyphicon-lockجربها

الرمز الديناميكي glyphicon glyphicon-flagجربها

الرمز الديناميكي glyphicon glyphicon-headphonesجربها

الرمز الديناميكي glyphicon glyphicon-volume-offجربها

الرمز الديناميكي glyphicon glyphicon-volume-downجربها

الرمز الديناميكي glyphicon glyphicon-volume-upجربها

الرمز الديناميكي glyphicon glyphicon-qrcodeجربها

الرمز الديناميكي glyphicon glyphicon-barcodeجربها

الرمز الديناميكي glyphicon glyphicon-tagجربها

الرمز الديناميكي glyphicon glyphicon-tagsجربها

الرمز الديناميكي glyphicon glyphicon-bookجربها

الرمز الديناميكي glyphicon glyphicon-bookmarkجربها

الرمز الديناميكي glyphicon glyphicon-printجربها

الرمز الديناميكي glyphicon glyphicon-cameraجربها

الرمز الديناميكي glyphicon glyphicon-fontجربها

الرمز الديناميكي glyphicon glyphicon-boldجربها

الرمز الديناميكي glyphicon glyphicon-italicجربها

الرمز الديناميكي glyphicon glyphicon-text-heightجربها

الرمز الديناميكي glyphicon glyphicon-text-widthجربها

الرمز الديناميكي glyphicon glyphicon-align-leftجربها

الرمز الديناميكي glyphicon glyphicon-align-centerجربها

الرمز الديناميكي glyphicon glyphicon-align-rightجربها

الرمز الديناميكي glyphicon glyphicon-align-justifyجربها

الرمز الديناميكي glyphicon glyphicon-listجربها

الرمز الديناميكي glyphicon glyphicon-indent-leftجربها

الرمز الديناميكي glyphicon glyphicon-indent-rightجربها

الرمز الديناميكي glyphicon glyphicon-facetime-videoجربها

الرمز الديناميكي glyphicon glyphicon-pictureجربها

الرمز الديناميكي glyphicon glyphicon-map-markerجربها

الرمز الديناميكي glyphicon glyphicon-adjustجربها

الرمز الديناميكي glyphicon glyphicon-tintجربها

تعديلجربها

مشاركةجربها

إشارة تأكيدجربها

تحريكجربها

تحرك للخلفجربها

تحرك سريع للخلفجربها

تحرك للخلفجربها

تشغيلجربها

إيقافجربها

إيقافجربها

تحرك للأمامجربها

تحرك سريع للأمامجربها

تحرك للأمامجربها

إطلاقجربها

موجه إلى اليسارجربها

موجه إلى اليمينجربها

إشارة زائدجربها

إشارة ناقصجربها

إشارة إزالةجربها

إشارة موافقةجربها

إشارة سؤالجربها

إشارة معلوماتجربها

شاشة صورةجربها

حلقة إزالةجربها

حلقة موافقةجربها

حلقة حظرجربها

إشارة إلى اليسارجربها

إشارة إلى اليمينجربها

إشارة للأسفلجربها

إشارة للأسفلجربها

مشاركةجربها

إيقاف تشغيل الشاشة الكاملةجربها

إشارة-الغولونغ-إشارة-التغير-الصغيرجربها

إشارة-الغولونغ-إشارة-الإشارة-التنبيهيةجربها

إشارة-الغولونغ-إشارة-الهديةجربها

إشارة-الغولونغ-إشارة-الورقة-الخضراءجربها

إشارة-الغولونغ-إشارة-النارجربها

إشارة-الغولونغ-إشارة-العين-المفتوحةجربها

إشارة-الغولونغ-إشارة-العين-المغلقجربها

إشارة-الغولونغ-إشارة-الإشارة-التحذيريةجربها

إشارة-الغولونغ-إشارة-الطائرةجربها

إشارة-الغولونغ-إشارة-الكALEندارجربها

إشارة-الغولونغ-إشارة-العدديةجربها

إشارة-الغولونغ-إشارة-التعليقجربها

إشارة-الغولونغ-إشارة-المغناطيسجربها

إشارة-الغولونغ-إشارة-السهم-الصعودجربها

إشارة-الغولونغ-إشارة-السهم-الأسفلجربها

إشارة-الغولونغ-إشارة-التعليق-المجددجربها

إشارة-الغولونغ-إشارة-السلة-التسوقجربها

إشارة-الغولونغ-إشارة-المجلد-المغلقجربها

إشارة-الغولونغ-إشارة-المجلد-المفتوحجربها

إشارة-الغولونغ-إشارة-التغير-الافقيجربها

إشارة-الغولونغ-إشارة-التغير-العموديجربها

إشارة-الغولونغ-إشارة-القرص-الصلبجربها

إشارة-الغولونغ-إشارة-الصافرةجربها

إشارة-الغولونغ-إشارة-الجرسجربها

إشارة-الغولونغ-إشارة-الشهادةجربها

إشارة-الغولونغ-إشارة-الصغار-الصعودجربها

إشارة-الغولونغ-إشارة-الصغار-الأسفلجربها

إشارة-الغولونغ-إشارة-اليد-اليمينجربها

إشارة-الغولونغ-إشارة-اليد-اليسرىجربها

إشارة-الغولونغ-إشارة-اليد-الصعودجربها

إشارة-الغولونغ-إشارة-اليد-الأسفلجربها

إشارة-الغولونغ-إشارة-الإتجاه-اليمينجربها

glyphicon glyphicon-circle-arrow-leftجربها

glyphicon glyphicon-circle-arrow-upجربها

glyphicon glyphicon-circle-arrow-downجربها

glyphicon glyphicon-globeجربها

glyphicon glyphicon-wrenchجربها

glyphicon glyphicon-tasksجربها

glyphicon glyphicon-filterجربها

glyphicon glyphicon-briefcaseجربها

glyphicon glyphicon-fullscreenجربها

glyphicon glyphicon-dashboardجربها

glyphicon glyphicon-paperclipجربها

glyphicon glyphicon-heart-emptyجربها

glyphicon glyphicon-linkجربها

glyphicon glyphicon-phoneجربها

glyphicon glyphicon-pushpinجربها

glyphicon glyphicon-usdجربها

glyphicon glyphicon-gbpجربها

glyphicon glyphicon-sortجربها

glyphicon glyphicon-sort-by-alphabetجربها

glyphicon glyphicon-sort-by-alphabet-altجربها

glyphicon glyphicon-sort-by-orderجربها

glyphicon glyphicon-sort-by-order-altجربها

glyphicon glyphicon-sort-by-attributesجربها

glyphicon glyphicon-sort-by-attributes-altجربها

glyphicon glyphicon-uncheckedجربها

glyphicon glyphicon-expandجربها

glyphicon glyphicon-collapse-downجربها

glyphicon glyphicon-collapse-upجربها

glyphicon glyphicon-log-inجربها

glyphicon glyphicon-flashجربها

glyphicon glyphicon-log-outجربها

الرمز المدمج glyphicon glyphicon-new-windowجربها

الرمز المدمج glyphicon glyphicon-recordجربها

الرمز المدمج glyphicon glyphicon-saveجربها

الرمز المدمج glyphicon glyphicon-openجربها

الرمز المدمج glyphicon glyphicon-savedجربها

الرمز المدمج glyphicon glyphicon-importجربها

الرمز المدمج glyphicon glyphicon-exportجربها

الرمز المدمج glyphicon glyphicon-sendجربها

الرمز المدمج glyphicon glyphicon-floppy-diskجربها

الرمز المدمج glyphicon glyphicon-floppy-savedجربها

الرمز المدمج glyphicon glyphicon-floppy-removeجربها

الرمز المدمج glyphicon glyphicon-floppy-saveجربها

الرمز المدمج glyphicon glyphicon-floppy-openجربها

الرمز المدمج glyphicon glyphicon-credit-cardجربها

الرمز المدمج glyphicon glyphicon-transferجربها

الرمز المدمج glyphicon glyphicon-cutleryجربها

الرمز المدمج glyphicon glyphicon-headerجربها

الرمز المدمج glyphicon glyphicon-compressedجربها

الرمز المدمج glyphicon glyphicon-earphoneجربها

الرمز المدمج glyphicon glyphicon-phone-altجربها

الرمز المدمج glyphicon glyphicon-towerجربها

الرمز المدمج glyphicon glyphicon-statsجربها

الرمز المدمج glyphicon glyphicon-sd-videoجربها

الرمز المدمج glyphicon glyphicon-hd-videoجربها

الرمز المدمج glyphicon glyphicon-subtitlesجربها

الرمز المدمج glyphicon glyphicon-sound-stereoجربها

الرمز المدمج glyphicon glyphicon-sound-dolbyجربها

الرمز المدمج glyphicon glyphicon-sound-5-1جربها

الرمز المدمج glyphicon glyphicon-sound-6-1جربها

الرمز المدمج glyphicon glyphicon-sound-7-1جربها

الرمز المدمج glyphicon glyphicon-copyright-markجربها

الرمز المدمج glyphicon glyphicon-registration-markجربها

glyphicon glyphicon-cloud-downloadجربها

glyphicon glyphicon-cloud-uploadجربها

glyphicon glyphicon-tree-coniferجربها

glyphicon glyphicon-tree-deciduousجربها
قائمة تنسدل Bootstrapأدوات مفيدة للردود Bootstrap