شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
السلام عليكم ورحمه الله وبركاته ماهو موقع fontello.comهذا الموقع يتيح لك استخدام الصور الرمزية بصيغة الخط font ، بمعنى أنك لن تبحث بعد اليوم عن صور للايقونات الخاصة بموقعك فقط من خلال هذة المكتبة الخاصة بالصورة والتي تم تحويلها الى صيغة font ستتمكن من استخدم هذة الصور في موقعك بكل بساطه ، فقط كل ماعليك هو ازالة الصور من القوالب واستبدالها بـ class وتضع اسم الصورة مبتدأ بـ كود:
icon- اذا سيتطلب منك تحميل الصور المطلوب استخدامها في الموقع وانا انصح بتحميل كامل المكتبة لتتمكن في استخدام أي صورة في أي وقت تريد . :: خطوات التركيب :: الخطوة الاولى : 1-اذهب للموقع كود:
http://fontello.com/ 3- قم بالتحديد على كافة الصور وذلك بالضغط بالماوس بالزر الايسر من اعلى طرف مجموعة الصور وقم بسحب الماوس دون اخلاء الزر الايسر لتتمكن من تحديد كل مجموعة على حده بهذا الشكل : 4- بعد الانتهى من تحديد كافة الصور ستلاحظ ظهور عدد الصور المختارة في الزر الاحمر اعلى الموقع والذي سيكون بأسم download webfont وسيحمل عدد الصور المختارة كما بالصورة التاليه. 5- قم الان بالضغط على Download webfont لتحميل الملفات كما بالصورة. 6- اضغط من التبويبات في الاعلى على كلمة customize Name لترى جميع الصور التي قمت بإختيارها وكذلك اسم الصوره لتتمكن من نسخه ووضعه في اسم الكلاس class الذي تريد ان تظهر به الصوره كما في الشكل التالي : الخطوة الثانية : بعد تحميل الملفات قم برفعها جميعا الى مجلد موقعك الرئيسيى مع تعديل ملف fontello.css الموجود في مجلد css فى حال انك رفعته الى مجلد منتداتك فسيتطلب اضافة رابط موقع ليصبح على هذا الشكل. الخطوة الثالثة: 1- رابط استدعاء المكتبة يكون على لشكل التالي : كود:
<link rel="stylesheet" href="http://www.yoursite.com/vb/fontello/css/fontello.css" />
الخطوة الرابعة: في حال اردت إستبدال صورة في موقعك بـأحد هذه الايقونات قم فقط بإزالة كود الصورة كامل ومن ثم اضف class لحامل الصورة لتظهر بدل منها كود:
<div> كود:
<div class="icon-basket-4"> كود:
icon- اما بخصوص كود سيكون على هذا الشكل كود:
.icon-basket-4 { الموضوع بالارشيف :https://web.archive.org/web/20190521...ead.php?t=6899 |
رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
مشكوووووووووور جدا على الشرح
تم حفظ الصور كود:
https://dev-point.co/download316181.html |
رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
شرح رووووووووعه
احسنت يابطل |
رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
شكرا لك
علطرح اخى |
رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
الموضوع يستحق ان يرفع
للتنشيط |
رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
الله ينور عليك شرح راااااااااااائع
|
رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
تم اضافة الموضوع بالارشيف
|
الساعة الآن 09:28 PM |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By
Almuhajir