هيلبرنت | Helpernt - شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة

السلام عليكم ورحمه الله وبركاته

ماهو موقع fontello.com
هذا الموقع يتيح لك استخدام الصور الرمزية بصيغة الخط font ، بمعنى أنك لن تبحث بعد اليوم عن صور للايقونات الخاصة بموقعك
فقط من خلال هذة المكتبة الخاصة بالصورة والتي تم تحويلها الى صيغة font ستتمكن من استخدم هذة الصور في موقعك بكل بساطه ، فقط كل ماعليك هو ازالة الصور من القوالب واستبدالها بـ class وتضع اسم الصورة مبتدأ بـ

كود:

icon-

قبل اسم الصورة .
اذا سيتطلب منك تحميل الصور المطلوب استخدامها في الموقع وانا انصح بتحميل كامل المكتبة لتتمكن في استخدام أي صورة في أي وقت تريد .

:: خطوات التركيب ::
الخطوة الاولى :
1-اذهب للموقع

كود:

http://fontello.com/

2- بعد الدخول للموقع ستجده على هذا الشكل.

https://i.imgur.com/CB6J3mS.gif

3- قم بالتحديد على كافة الصور وذلك بالضغط بالماوس بالزر الايسر من اعلى طرف مجموعة الصور وقم بسحب الماوس دون اخلاء الزر الايسر لتتمكن من تحديد كل مجموعة على حده بهذا الشكل :

https://i.imgur.com/0cLncXH.gif

4- بعد الانتهى من تحديد كافة الصور ستلاحظ ظهور عدد الصور المختارة في الزر الاحمر اعلى الموقع والذي سيكون بأسم download webfont وسيحمل عدد الصور المختارة كما بالصورة التاليه.

https://i.imgur.com/FUacUVw.gif

5- قم الان بالضغط على Download webfont لتحميل الملفات كما بالصورة.

https://i.imgur.com/xD7hRYd.gif

6- اضغط من التبويبات في الاعلى على كلمة customize Name لترى جميع الصور التي قمت بإختيارها وكذلك اسم الصوره لتتمكن من نسخه ووضعه في اسم الكلاس class الذي تريد ان تظهر به الصوره كما في الشكل التالي :

https://i.imgur.com/3U1kRkn.gif

الخطوة الثانية :
بعد تحميل الملفات قم برفعها جميعا الى مجلد موقعك الرئيسيى مع تعديل ملف fontello.css الموجود في مجلد css فى حال انك رفعته الى مجلد منتداتك فسيتطلب اضافة رابط موقع ليصبح على هذا الشكل.

https://i.imgur.com/3fX9Rcl.gif

الخطوة الثالثة:
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-

قبل اسم الايقونة
اما بخصوص كود سيكون على هذا الشكل

كود:

.icon-basket-4 {

font-size: 20px;

color: #FF0000;

}

يوضع اما فى قالب extra وده للزين فورو او فى css رئيسي منتديات الفى بى

الموضوع بالارشيف :https://web.archive.org/web/20190521...ead.php?t=6899