السلام عليكم ورحمه الله وبركاته
ماهو موقع fontello.com
هذا الموقع يتيح لك استخدام الصور الرمزية بصيغة الخط font ، بمعنى أنك لن تبحث بعد اليوم عن صور للايقونات الخاصة بموقعك
فقط من خلال هذة المكتبة الخاصة بالصورة والتي تم تحويلها الى صيغة font ستتمكن من استخدم هذة الصور في موقعك بكل بساطه ، فقط كل ماعليك هو ازالة الصور من القوالب واستبدالها بـ class وتضع اسم الصورة مبتدأ بـ
قبل اسم الصورة .
اذا سيتطلب منك تحميل الصور المطلوب استخدامها في الموقع وانا انصح بتحميل كامل المكتبة لتتمكن في استخدام أي صورة في أي وقت تريد .
:: خطوات التركيب ::
الخطوة الاولى :
1-اذهب للموقع
كود:
http://fontello.com/
2- بعد الدخول للموقع ستجده على هذا الشكل.
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" />
مع تغيير ماهو بلون الاحمر والازرق- بالنسبه للمنتديات الفى بى يوضع فى قالب headinclude
- بالنسبه للمنتديات الزين فورو يوضع فى قالب PAGE_CONTAINER
الخطوة الرابعة:
في حال اردت إستبدال صورة في موقعك بـأحد هذه الايقونات قم فقط بإزالة كود الصورة كامل ومن ثم اضف class لحامل الصورة لتظهر بدل منها
كود:
<div>
<img src="images/quote_icon.png" border="0" alt="$vbphrase[view_post]" />
بعد التعديل سيكون بالشكل التالي :
كود:
<div class="icon-basket-4">
لا تنسى اضافة كلمة
قبل اسم الايقونة
اما بخصوص كود سيكون على هذا الشكل
كود:
.icon-basket-4 {
font-size: 20px;
color: #FF0000;
}
يوضع اما فى قالب extra وده للزين فورو او فى css رئيسي منتديات الفى بى