رمز الخط التمهيد (Glyphicons)

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

ما هو رمز الخط؟

الخطوط رمز هو خط الرمز المستخدم في مشروع ويب. وعلى الرغم من halflings Glyphicons تحتاج إلى ترخيص تجاري، ولكن يمكنك على أساس المشروع التمهيد لاستخدام مجاني هذه الرموز.

من أجل التعبير عن الامتنان رمز المؤلف، وآمل أن إضافة الموقع على وصلات GLYPHICONS أثناء الاستخدام.

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

لدينا بيئة تثبيت الفصول تنزيل الإصدار 3.x التمهيد، وفهم بنية الدليل الخاص به. فيالخطوطيمكن الرموز مجلد العثور على الخط الذي يحتوي على هذه الملفات ما يلي:

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-regular.ttf
• glyphicons-halflings-regular.woff

النظام المغلق المتعلقة مكتوب فيحيالمجلد المغلقbootstrap.cssمجلدوالتمهيد-min.cssداخل الملف.

الخطوط القائمة رمز

انقر هنا لعرض قائمة من رمز الخطوط المتاحة.

تفسير CSS القواعد

تشكل قاعدة CSS التالية glyphicon الطبقة.

@ الخط وجه {
  الخط بين أفراد الأسرة: 'Glyphicons Halflings'؛
  SRC: رابط ( '../ الخطوط / glyphicons-halflings-regular.eot')؛
  SRC: رابط ( '../ #iefix الخطوط / glyphicons-halflings-regular.eot؟) شكل (' جزءا لا يتجزأ من أوبن ')، رابط (' ../ الخطوط / glyphicons-halflings-regular.woff ') شكل ( "WOFF)، رابط ( 'الخطوط ../ / glyphicons-halflings-regular.ttf') شكل ( 'تروتايب)، رابط (' ../ الخطوط / glyphicons-halflings-regular.svg # glyphicons_halflingsregular ') شكل ( "SVG ')؛
}

.glyphicon {
  موقع: نسبي.
  أعلى: 1PX.
  عرض: مضمنة كتلة.
  الخط بين أفراد الأسرة: 'Glyphicons Halflings'؛
  -webkit-الخط-تمهيد: الحواف المحسنة.
  على غرار الخط: عادي؛
  الخط الوزن: عادي؛
  خط الطول: 1؛
  -moz-سكس-الخط-تمهيد: الرمادي.
}

لذلك حكم الخط وجه هو في الواقع مكان للعثور على إعلان glyphicons الخط بين أفراد الأسرة، والمكان.

الطبقة .glyphicon تعلن موقفا النسبي تعويض من أعلى 1PX، كما تصدر مضمنة لبنة، والخطوط بيان الأحكام نمط الخط والخط الوزن أمر طبيعي، وضبط ارتفاع الصف إلى 1. وبالإضافة إلى ذلك، فإن استخدام -webkit-الخط-تمهيد: الحواف المحسنة و-moz-سكس-الخط-تمهيد: الرمادي، الحصول على الاتساق عبر متصفح.

ثم، أين

.glyphicon: فارغة {
  عرض: 1em.
}

glyphicon فارغة.

هناك 200 صنف، كل فئة للرمز. هذه الطبقة شكل شيوعا هي على النحو التالي:

.glyphicon الكلمات الرئيسية: قبل {
  المحتوى: "hexvalue".
}

على سبيل المثال، رموز للمستخدم استخدام، انها الفئة على النحو التالي:

.glyphicon الاستعمال: قبل {
  المحتوى: "\ E008".
}

استعمال

لاستخدام الرمز، ببساطة استخدام التعليمات البرمجية التالية. الرجاء الحفاظ على الفضاء المناسب بين الرموز والنصوص.

<الطبقة سبان = "glyphicon glyphicon في البحث عن"> </ SPAN>

يوضح المثال التالي كيفية استخدام رمز الخطوط:

وكانت النتائج على النحو التالي:

رمز الخط مع شريط التنقل

رمز خطوط مخصصة

لقد رأينا كيفية استخدام رمز خطوط ثم نرى كيفية تخصيص رمز الخط.

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

هنا يبدأ رمز:

<نوع زر = "زر" الطبقة = "BTN BTN الابتدائي BTN-إل جي">
  <سبان الطبقة = "glyphicon glyphicon المستخدم"> </ SPAN> العضو
</ زر>

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

الخط حجم مخصص

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

<نوع زر = "زر" الطبقة = "BTN BTN الابتدائي BTN-جي" على غرار = "FONT-SIZE: 60px">
  <سبان الطبقة = "glyphicon glyphicon المستخدم"> </ SPAN> العضو
</ زر>

لون الخط مخصص

<نوع زر = "زر" الطبقة = "BTN BTN الابتدائي BTN-جي" على غرار = "اللون: RGB (212، 106، 64)؛">
  <سبان الطبقة = "glyphicon glyphicon المستخدم"> </ SPAN> العضو
</ زر>

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

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

رمز خط مخصص على الإنترنت

انقر هنا لتخصيص رمز الخط >>

قائمة رمز