طريقة تركيب مكتبة الخطوط Font-Awesome في تصميمك للمواقع
المشاهدات:
4845
الردود:
3
هيلبرنت
.:: رفيق درب ::.
سنتحدث في تدوينة اليوم عن خطوط الايقونات، حيث سأشرح لكم طريقة استعمال مكتبة Font-Awesome، واستعمالاتها ، طبعا سنستعمل في الشرح الخط الشهير Font Awesome وهو الأكثر تنوعاً و الأسهل استخداماً. تعريف بالمكتبة : هي مكتبة ايقونات، هذه الايقونات عبارة عن font يتم تحكم فيها من خلال css.
شرح الخطوات
- عليك مبدئيا تحميل ملفات المكتبة من موقعها الرسمى Font Awesome
- بعد التحميل قم بفك الضغط عن المجلد ثم قم برفعكلا من css و fonts الى مجلد منتداك الرئيسى عن طريق الـ FTP كما بالصوره
- ادخل لوحة الادارة - الاستايلات والقوالب - البحث عن قالب ضع اسم القالب headinclude كما بالصورة
- وبعدها ادخل على القالب المذكور
- ثم قم بوضع الكواد التالى والحاص يتعريف ملفات المكتبة في اخر قالب الـ headinclude .
كما بالصورة
كيف يمكن استخدام الأيقونات في الموقع؟
يتوجب عليك التوجه إلى هذا الرابط الذي يحتوي على جميع الأيقونات من هنا سوف تلاحظ بجوار كل أيقونة اسم.
- قم بالوقوف على الايقونة بالماوس ثم اضغط كليك يمين ثم ختار م المربع open link in new tab كما بالصورة.
- ستفتح لكل صفحة جديدة قم بنسخ كود الهاتمل HTML كما بالصورة
- الآن ضع وسم html ، أو أي وسم تريده ويكون على هذا الشكل.
إضافة خاصية الدوران الى الأيقونات الدائرية فقط
وذالك بإضافة القيمة fa-spin الى الكود مثــــــال :
ويتم ذلك من خلال استخدام هذا الكود
خاصية التحكم باتجاهات بستخدام القيمة fa-rotate
مثــــــال:
ويتم ذلك من خلال استخدام هذا الكود
خاصية التحكم بحجم الايقونة
مثــــــال:
ويتم ذلك من خلال استخدام هذا الكود
شرح الخطوات
- عليك مبدئيا تحميل ملفات المكتبة من موقعها الرسمى Font Awesome
- بعد التحميل قم بفك الضغط عن المجلد ثم قم برفعكلا من css و fonts الى مجلد منتداك الرئيسى عن طريق الـ FTP كما بالصوره
- ادخل لوحة الادارة - الاستايلات والقوالب - البحث عن قالب ضع اسم القالب headinclude كما بالصورة
- وبعدها ادخل على القالب المذكور
- ثم قم بوضع الكواد التالى والحاص يتعريف ملفات المكتبة في اخر قالب الـ headinclude .
كود
🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.
كيف يمكن استخدام الأيقونات في الموقع؟
يتوجب عليك التوجه إلى هذا الرابط الذي يحتوي على جميع الأيقونات من هنا سوف تلاحظ بجوار كل أيقونة اسم.
- قم بالوقوف على الايقونة بالماوس ثم اضغط كليك يمين ثم ختار م المربع open link in new tab كما بالصورة.
- ستفتح لكل صفحة جديدة قم بنسخ كود الهاتمل HTML كما بالصورة
- الآن ضع وسم html ، أو أي وسم تريده ويكون على هذا الشكل.
كود
🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.
بعض الخصائص
إضافة خاصية الدوران الى الأيقونات الدائرية فقط
وذالك بإضافة القيمة fa-spin الى الكود مثــــــال :
ويتم ذلك من خلال استخدام هذا الكود
كود
🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.
خاصية التحكم باتجاهات بستخدام القيمة fa-rotate
مثــــــال:
ويتم ذلك من خلال استخدام هذا الكود
كود
🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.
خاصية التحكم بحجم الايقونة
مثــــــال:
ويتم ذلك من خلال استخدام هذا الكود
كود
🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.
