vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع

سنتحدث في تدوينة اليوم عن خطوط الايقونات، حيث سأشرح لكم طريقة استعمال مكتبة Font-Awesome، واستعمالاتها ، طبعا سنستعمل في الشرح الخط الشهير Font Awesome وهو الأكثر تنوعاً و الأسهل استخداماً.

  #1  
افتراضي vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع

سنتحدث في تدوينة اليوم عن خطوط الايقونات، حيث سأشرح لكم طريقة استعمال مكتبة Font-Awesome، واستعمالاتها ، طبعا سنستعمل في الشرح الخط الشهير Font Awesome وهو الأكثر تنوعاً و الأسهل استخداماً. تعريف بالمكتبة : هي مكتبة ايقونات، هذه الايقونات عبارة عن font يتم تحكم فيها من خلال css.

شرح الخطوات
- عليك مبدئيا تحميل ملفات المكتبة من موقعها الرسمى Font Awesome

- بعد التحميل قم بفك الضغط عن المجلد ثم قم برفعكلا من css و fonts الى مجلد منتداك الرئيسى عن طريق الـ FTP كما بالصوره

vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع 3153-cached.gif

- ادخل لوحة الادارة - الاستايلات والقوالب - البحث عن قالب ضع اسم القالب headinclude كما بالصورة

vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع 3154-cached.png

- وبعدها ادخل على القالب المذكور

vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع 3155-cached.png

- ثم قم بوضع الكواد التالى والحاص يتعريف ملفات المكتبة في اخر قالب الـ headinclude .
<link rel="stylesheet" href="css/font-awesome.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/font-awesome.min.css"/>


كما بالصورة

vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع 3156-cached.png

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

- قم بالوقوف على الايقونة بالماوس ثم اضغط كليك يمين ثم ختار م المربع open link in new tab كما بالصورة.

vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع 3157-cached.gif

- ستفتح لكل صفحة جديدة قم بنسخ كود الهاتمل HTML كما بالصورة

vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع 3158-cached.gif

- الآن ضع وسم html ، أو أي وسم تريده ويكون على هذا الشكل.
<span class="icon-search"></span>


بعض الخصائص


إضافة خاصية الدوران الى الأيقونات الدائرية فقط
وذالك بإضافة القيمة fa-spin الى الكود مثــــــال :

vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع 3159-cached.gif

ويتم ذلك من خلال استخدام هذا الكود
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>




خاصية التحكم باتجاهات بستخدام القيمة fa-rotate
مثــــــال:

vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع 3160-cached.gif

ويتم ذلك من خلال استخدام هذا الكود
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>


خاصية التحكم بحجم الايقونة
مثــــــال:

vBulletin 3 طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع 3161-cached.gif

ويتم ذلك من خلال استخدام هذا الكود
<i class="fa fa-leaf fa-lg"></i> fa-leaf fa-lg
<i class="fa fa-leaf fa-1x"></i> fa-leaf fa-1x
<i class="fa fa-leaf fa-2x"></i> fa-leaf fa-2x
<i class="fa fa-leaf fa-3x"></i> fa-leaf fa-3x
<i class="fa fa-leaf fa-4x"></i> fa-leaf fa-4x
<i class="fa fa-leaf fa-5x"></i> fa-leaf fa-5x
اقتباس


أدوات الموضوع إبحث في الموضوع
إبحث في الموضوع:

البحث المتقدم
انواع عرض الموضوع تقييم هذا الموضوع
تقييم هذا الموضوع:

الانتقال السريع


الساعة المعتمدة بتوقيت جرينتش +3 . الساعة الآن 07:53 AM.

جميع الحقوق محفوظة لـ الدعم العربي التطويري | مدعوم بواسطة فبلتن ®

Your Avatar

تسجيل الخروج غير مسجل

هل أنت متأكد برغبتك في الخروج من المنتدى؟ تسجيل الخروج