مؤسسة أيقونة
تقدم مؤسسة 283 الرموز، يمكنك تحديد حجم أسلوبه باستخدام المغلق.
الرموز يمكن أن تستخدم في النص، الأزرار، وأشرطة، والملاحة، والأشكال، وهلم جرا.
وفيما يلي أمثلة من مؤسسة الرموز:
تحديث الزر:
رمز الكشف:
رمز المنزل:
رمز بناء الجملة
إنشاء الرموز بناء الجملة كما يلي:
<i class="fi-name"></i>
استبدال اسم رمز جزء من الاسم.
لاستخدام رمز نحتاج إلى القسم <head> لإضافة ملف نمط رمز:
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
أمثلة رمز
توضح الأمثلة التالية استخدام الرموز:
أمثلة
<P> سحابة رمز: <ط الطبقة = "فاي سحابة"> </ I> </ P>
<P> رمز الغيمة كحلقة وصل :
<A أ href = "#"> <ط الطبقة = "فاي سحابة"> </ I> </ أ>
</ P>
<P> نصب الغيمة رمز: < ط الطبقة = "فاي سحابة" على غرار = "FONT-SIZE: 35px؛ اللون: الأحمر؛"> </ I> </ P>
<P> رمز الوطن: <ط الطبقة = "فاي في المنزل"> </ I> </ P>
<P> رمز الرئيسية على زر :
<نوع زر = "زر" الطبقة = "زر">
<الصف الأول = "فاي المنزل "> </ I> الرئيسية
</ زر>
</ P>
<P> رمز الرئيسية على الأخضر زر:
<نوع زر = "زر" الطبقة = "زر نجاح">
<الصف الأول = "فاي المنزل "> </ I> الرئيسية
</ زر>
</ P>
<P> رمز الرئيسية على كبير زر والأزرق الفاتح الرابط:
<A أ href = "#" الطبقة = معلومات "button large">
<الصف الأول = "فاي المنزل "> </ I> الرئيسية
</ A>
</ P>
<P> رمز الغيمة كحلقة وصل :
<A أ href = "#"> <ط الطبقة = "فاي سحابة"> </ I> </ أ>
</ P>
<P> نصب الغيمة رمز: < ط الطبقة = "فاي سحابة" على غرار = "FONT-SIZE: 35px؛ اللون: الأحمر؛"> </ I> </ P>
<P> رمز الوطن: <ط الطبقة = "فاي في المنزل"> </ I> </ P>
<P> رمز الرئيسية على زر :
<نوع زر = "زر" الطبقة = "زر">
<الصف الأول = "فاي المنزل "> </ I> الرئيسية
</ زر>
</ P>
<P> رمز الرئيسية على الأخضر زر:
<نوع زر = "زر" الطبقة = "زر نجاح">
<الصف الأول = "فاي المنزل "> </ I> الرئيسية
</ زر>
</ P>
<P> رمز الرئيسية على كبير زر والأزرق الفاتح الرابط:
<A أ href = "#" الطبقة = معلومات "button large">
<الصف الأول = "فاي المنزل "> </ I> الرئيسية
</ A>
</ P>
محاولة »
أيقونات شريط الأدوات
يمكننا استخدام .icon-bar فئة لإنشاء عدد محدد من أيقونات شريط الأدوات:
أمثلة
<div الطبقة = "رمز بار خمس سنوات حتى">
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي المنزل "> </ I>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي المرجعية "> </ I>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي معلومات "> </ I>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي الإلكتروني "> </ I>
</ A>
<A أ href = "#" الطبقة = "item">
<الصف الأول = "فاي مثل "> </ I>
</ A>
</ div>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي المنزل "> </ I>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي المرجعية "> </ I>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي معلومات "> </ I>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي الإلكتروني "> </ I>
</ A>
<A أ href = "#" الطبقة = "item">
<الصف الأول = "فاي مثل "> </ I>
</ A>
</ div>
محاولة »
icon الوصف: استخدم <label> العنصر:
أمثلة
<div الطبقة = "رمز بار خمس سنوات حتى">
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي المنزل "> </ I>
<تسمية> الصفحة الرئيسية </ التسمية>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي حصة "> </ I>
<تسمية> مشاركة </ التسمية>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي معلومات "> </ I>
<تسمية> معلومات </ التسمية>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي الإلكتروني "> </ I>
<تسمية> البريد </ التسمية>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي-مكبرة من الزجاج"> </ I>
<تسمية> البحث </ التسمية>
</ A>
</ div>
محاولة » <A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي المنزل "> </ I>
<تسمية> الصفحة الرئيسية </ التسمية>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي حصة "> </ I>
<تسمية> مشاركة </ التسمية>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي معلومات "> </ I>
<تسمية> معلومات </ التسمية>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي الإلكتروني "> </ I>
<تسمية> البريد </ التسمية>
</ A>
<A أ href = "#" الطبقة = "item">
<I الطبقة = "فاي-مكبرة من الزجاج"> </ I>
<تسمية> البحث </ التسمية>
</ A>
</ div>
.disabled الطبقة يتيح أصبحت لا نقر رمز الحالة:
أمثلة
<A أ href = "#" الطبقة = "item disabled">
<I الطبقة = "فاي حصة "> </ I>
</ A>
<A أ href = "#" الطبقة = "item disabled">
<I الطبقة = "فاي الإلكتروني "> </ I>
</ A>
<I الطبقة = "فاي حصة "> </ I>
</ A>
<A أ href = "#" الطبقة = "item disabled">
<I الطبقة = "فاي الإلكتروني "> </ I>
</ A>
محاولة »
.vertical يستخدم فئة لإنشاء شريط أدوات الرأسي:
دليل مؤسسة أيقونة المرجعي
المزيد عن محتويات الرمز، يمكنك الرجوع إلى دليل رمز المؤسسة.