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


مواضيع تهمك

ركن تطوير المواقع قسم يختص بشرح التركيب و الترقية و الإضافات و القوالب وملفات التعريب لبرنامج الووردبريس ومدونة بلوجر.

شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة

السلام عليكم ورحمه الله وبركاته ماهو موقع fontello.com هذا الموقع يتيح لك استخدام الصور الرمزية بصيغة الخط font ،...

احصائياتى

الردود
6

المشاهدات
2070
ahmed200
.:: عضو مبدع ::.
  • ahmed200 will become famous soon enough

  • ahmed200 غير متواجد حالياً

المشاركات
584

+التقييم
27

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

الاقامة
فى القلب

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

رقم العضوية
306
01-25-2018, 05:00 PM
المشاركة 1
01-25-2018, 05:00 PM
المشاركة 1
افتراضي شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
السلام عليكم ورحمه الله وبركاته
ماهو موقع fontello.com
هذا الموقع يتيح لك استخدام الصور الرمزية بصيغة الخط font ، بمعنى أنك لن تبحث بعد اليوم عن صور للايقونات الخاصة بموقعك
فقط من خلال هذة المكتبة الخاصة بالصورة والتي تم تحويلها الى صيغة font ستتمكن من استخدم هذة الصور في موقعك بكل بساطه ، فقط كل ماعليك هو ازالة الصور من القوالب واستبدالها بـ class وتضع اسم الصورة مبتدأ بـ
كود:
 icon-
قبل اسم الصورة .
اذا سيتطلب منك تحميل الصور المطلوب استخدامها في الموقع وانا انصح بتحميل كامل المكتبة لتتمكن في استخدام أي صورة في أي وقت تريد .

:: خطوات التركيب ::
الخطوة الاولى :
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-
قبل اسم الايقونة
اما بخصوص كود سيكون على هذا الشكل
كود:
.icon-basket-4 {
font-size: 20px;
color: #FF0000;
}
يوضع اما فى قالب extra وده للزين فورو او فى css رئيسي منتديات الفى بى




التعديل الأخير تم بواسطة هيلبرنت ; 05-21-2019 الساعة 08:16 PM
قديم 01-25-2018, 10:30 PM
المشاركة 2
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
مشكوووووووووور جدا على الشرح

تم حفظ الصور
كود:
https://dev-point.co/download316181.html

قديم 02-02-2018, 05:23 PM
المشاركة 3
abo-karim
.:: Administrator ::.
  • abo-karim غير متواجد حالياً
افتراضي رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
شرح رووووووووعه

احسنت يابطل

قديم 02-08-2018, 11:53 AM
المشاركة 4
طيور الظلام
.:: عضو فعال ::.
  • طيور الظلام غير متواجد حالياً
افتراضي رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
شكرا لك

علطرح اخى

قديم 05-22-2018, 11:46 PM
المشاركة 5
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
الموضوع يستحق ان يرفع

للتنشيط

قديم 05-23-2018, 04:51 PM
المشاركة 6
MesterPerfect
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • MesterPerfect غير متواجد حالياً
افتراضي رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
الله ينور عليك شرح راااااااااااائع

قديم 05-21-2019, 08:17 PM
المشاركة 7
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
تم اضافة الموضوع بالارشيف

اضافة رد

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

شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة


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

الانتقال السريع
المواضيع المتشابهه للموضوع: شرح طريقة استخدام مكتبة الخطوط fontello خطوة خطوة
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
تغيير ايقونات المنتدى بايقونات مكتبة fontello safwan khazraji ركن تطوير منتديات vb3.8.0 6 01-18-2020 08:36 PM
[Facebook] خطوة x خطوة كيف تعرف تسرب معلوماتك من الفيسبوك؟ هيلبرنت ركن مواقع التواصل الإجتماعي 1 06-18-2019 02:11 PM
طريقة تعليم قيادة السيارة للمبتدئين.. خطوة بخطوة شهد الشام الركن العام للمواضيع العامة 0 04-29-2019 03:23 PM
طريقة التسجيل بموقع فليكر Flickr خطوة بخطوة هيلبرنت ركن تطوير المواقع 1 02-04-2016 12:27 AM
طريقة تجاوز خطوة التعرف على الصور في الفايسبوك هيلبرنت ركن مواقع التواصل الإجتماعي 2 10-15-2015 12:42 AM




الساعة الآن 11:45 AM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum