عيد الاضحى المبارك


مواضيع تهمك

ركن تطوير منتديات vb3.8.0 القسم خاص بتطوير منتديات الجيل الثالث ويمنع منعاً باتاً.. كتابة اي موضوع يهتم بمشاكل المنتديات (( يمنع وضع نسخ vBulletin ))

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

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

احصائياتى

الردود
3

المشاهدات
2035
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant future

  • هيلبرنت غير متواجد حالياً

المشاركات
11,551

+التقييم
321

تاريخ التسجيل
Jul 2015

الاقامة
فى الدنيا

نظام التشغيل
windows 8

رقم العضوية
18
01-20-2019, 09:54 PM
المشاركة 1
01-20-2019, 09:54 PM
المشاركة 1
افتراضي طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع
سنتحدث في تدوينة اليوم عن خطوط الايقونات، حيث سأشرح لكم طريقة استعمال مكتبة Font-Awesome، واستعمالاتها ، طبعا سنستعمل في الشرح الخط الشهير Font Awesome وهو الأكثر تنوعاً و الأسهل استخداماً. تعريف بالمكتبة : هي مكتبة ايقونات، هذه الايقونات عبارة عن font يتم تحكم فيها من خلال css.

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

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


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


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


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


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

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


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


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


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


ويتم ذلك من خلال استخدام هذا الكود
كود:
<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
مثــــــال:


ويتم ذلك من خلال استخدام هذا الكود
كود:
<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>
خاصية التحكم بحجم الايقونة
مثــــــال:


ويتم ذلك من خلال استخدام هذا الكود
كود:
<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


قديم 01-20-2019, 11:26 PM
المشاركة 2
MesterPerfect
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • MesterPerfect غير متواجد حالياً
افتراضي رد: طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع
جميل جدا

جزاك الله خيرا على الطرح

قديم 01-23-2019, 10:02 PM
المشاركة 3
S!L3NT H!LL
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • S!L3NT H!LL غير متواجد حالياً
افتراضي رد: طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع
شرح مرتب شكرا لك

قديم 03-25-2019, 08:53 PM
المشاركة 4
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع
اشكركم ياشباب

اضافة رد

العلامات المرجعية

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


أدوات الموضوع

الانتقال السريع
المواضيع المتشابهه للموضوع: طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[XF 2.x] : شرح طريقة إضافة ايقونات مكتبة الخطوط Font Awesome للنافبار الزين فورو 2 نسيت النوم ركن شروحات الزين فورو XENFORO 10 03-20-2020 06:42 PM
تغيير رتب الاعضاء وتحويلها الى مكتبة الخطوط Font Awesome هيلبرنت ركن تطوير منتديات vb3.8.0 11 08-30-2018 05:55 PM
[XF 2.x Add] : هاك اضافة ايقونات مكتبة الخطوط font awesome لجميع القوائم المتواجد بالشريط الجانبى هيلبرنت اضافات الزين فورو XENFORO 5 05-28-2018 08:04 AM
[XF 2.x Add] : هاك اضافة ايقونات مكتبة الخطوط font awesome لقائمة العضو بالصفحة الرئيسية هيلبرنت اضافات الزين فورو XENFORO 3 01-19-2018 12:53 PM
[ شرح ] : طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo هيلبرنت ركن شروحات الزين فورو XENFORO 5 09-21-2017 05:27 PM




الساعة الآن 08:55 PM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum