شرح طريقة استخدام مكتبة fontello بالتفصيل
ندعم منتديات vBulletin بتقنية Css3
A L 6 W E R

[ شرح ] طريقة استخدام مكتبة fontello بالتفصيل


طريقة استخدام مكتبة fontello بالتفصيل

رقم الموضوع : 7437

تطوير المواقع والمنتديات

 
المشاهدات 8132 الردود 40 أدوات الموضوع إبحث في الموضوع

   رقم المشاركة [ 1 ]
23-01-2015, 12:02 PM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]

اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,868 تقييم المستوى17882 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 286   تم شكره 747 مرة في 568 مشاركة
Post2 طريقة استخدام مكتبة fontello بالتفصيل



طريقة استخدام مكتبة fontello بالتفصيل



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

سأشرح طريقة التركيب بالتفصيل ، والطريقة كالتالي :

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

HTML & CSS

icon
قبل اسم الصورة .

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

:: خطوات التركيب ::

الخطوة الاولى :
بعد تحميلك للمكتبة ستجد مجلدين الاول بإسم css والاخر بإسم font
قم برفعهما الى موقعك
اذا كنت تستخدم مجلد vb ضعهما فيه
أو forum
ولا تضعهما في مجلدات اخرى


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



الخطوة الثالثة :
ادخل الى لوحة تحكم الادارة وافتح قالب headinclude
ابحث داخل القالب عن :

HTML & CSS

<!-- CSS Stylesheet --> 
ثم ضع رابط استدعاء المكتبة بالشكل التالي :

HTML & CSS

<link rel="stylesheet" href="http://www.yoursite.com/vb/fontello/css/fontello.css" /> 
انتهينا من التركيب

تبقى لنا تفعيل الايقونات حسب مسمياتها في الموقع
اذهب للموقع http://fontello.com/
ثم قم بالتحديد على كافة الصور وذلك بالضغط بالماوس بالزر الايسر من اعلى طرف مجموعة الصور وقم بسحب الماوس دون اخلاء الزر الايسر لتتمكن من تحديد كل مجموعة على حده بهذا الشكل :



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



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



انتهـــــــــــــــــــــــــــــــــــــــى الشــــــــــــــــــــــــــــــــــــــــرح


في حال اردت إستبدال صورة في موقعك بـأحد هذه الايقونات
فقط قم بإزالة كود الصورة كامل ومن ثم اضف class لحامل الصورة لتظهر بدل منها


مثال :

HTML & CSS

<div>
<
img src="images/quote_icon.png" border="0" alt="$vbphrase[view_post]/> 
بعد التعديل سيكون بالشكل التالي :

HTML & CSS

<div class="icon-basket-4"
لا تنسى اضافة كلمة

HTML & CSS

icon
قبل اسم الايقونة

كود الـ css [ يتم اضافة كود الـ css عن طريق الإستايلات والقوالب ، التحكم بالاستايلات ، اختر من خيارات الاستايل css رئيسي ]
كما في الصورة :


HTML & CSS

.icon-basket-{
font-size20px;
color#FF0000;

ولأي استفسار أنا حاضر ..

:end:




كلمات البحث - معهد المطور ارشفة, ستايل, كود, هاك, html, css, java, BBcode, seo, php, JavaScript, Product, Style

أبوعبدالله, AhmedTiTo, بلاك فور, برادة   [ 4 ] معجبون بمشاركة AlM6weR

الملفات المرفقة
نوع الملف: zip fontello.zip‏ (1.33 ميجابايت, المشاهدات 1038)
المنتدى غير مسئول عن أي اضرار تصيب جهازك بسبب المرفق ، لذا يرجى الفحص بعد التحميل


توقيعي



عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).




   رقم المشاركة [ 2 ]
23-01-2015, 04:40 PM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
تجربتي
2
الصورة الرمزية لـ أبوعبدالله
أبوعبدالله عضو موثوق في معهد المطور
غير متواجد
[ المستشار ]

اسمي : AbuAbdullah , من : بيشة , أهتم بـ البرمجة - الشعر - القراءة .
عضو لدية أكثر من 2000 مشاركةعضو لدية أكثر من 2000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات2,334 تقييم المستوى3474 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 235   تم شكره 129 مرة في 106 مشاركة
افتراضي رد: طريقة استخدام مكتبة fontello بالتفصيل


بيض الله وجهك

شرح وافي كما عودتنا

وأخيرا نجحت في تطبيق الطريقة

فجزاك الله خيرا




توقيعي

تجربتي
الداعم الرسمي


   رقم المشاركة [ 3 ]
23-01-2015, 09:00 PM
:: منتدى الجزائر ::- لكل الجزائريين والعرب
6129
الصورة الرمزية لـ أبو شهاب
أبو شهاب
غير متواجد
[ مطوّر فعّال ]

اسمي : أبو شهاب , من : الجزائر ,
تاريخ الإنضمام23-08-2013 عدد المشاركات142 تقييم المستوى167 الدولةalgeria
الإعجابات التي قدمها للأعضاء 33   تم شكره 7 مرة في 6 مشاركة
افتراضي رد: طريقة استخدام مكتبة fontello بالتفصيل


الله عليك استاذ ابو محمد
شرح ممتاز




توقيعي

:: منتدى الجزائر :: لكل الجزائريين والعرب

http://alg4all.net



   رقم المشاركة [ 4 ]
24-01-2015, 12:50 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]

اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,868 تقييم المستوى17882 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 286   تم شكره 747 مرة في 568 مشاركة
افتراضي رد: طريقة استخدام مكتبة fontello بالتفصيل


بيض الله وجهك

شرح وافي كما عودتنا

وأخيرا نجحت في تطبيق الطريقة

فجزاك الله خيرا
الله عليك استاذ ابو محمد
شرح ممتاز
سعيد بتجربتكما الناجحه




توقيعي



عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).



   رقم المشاركة [ 5 ]
19-02-2015, 08:58 PM
:: منتدى الجزائر ::- لكل الجزائريين والعرب
6129
الصورة الرمزية لـ أبو شهاب
أبو شهاب
غير متواجد
[ مطوّر فعّال ]

اسمي : أبو شهاب , من : الجزائر ,
تاريخ الإنضمام23-08-2013 عدد المشاركات142 تقييم المستوى167 الدولةalgeria
الإعجابات التي قدمها للأعضاء 33   تم شكره 7 مرة في 6 مشاركة
افتراضي رد: طريقة استخدام مكتبة fontello بالتفصيل


استاذي ماهي الطريقة التي تمكنني من تغيير لون الايقونة




توقيعي

:: منتدى الجزائر :: لكل الجزائريين والعرب

http://alg4all.net



   رقم المشاركة [ 6 ]
19-02-2015, 09:24 PM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]

اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,868 تقييم المستوى17882 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 286   تم شكره 747 مرة في 568 مشاركة
افتراضي رد: طريقة استخدام مكتبة fontello بالتفصيل


استاذي ماهي الطريقة التي تمكنني من تغيير لون الايقونة
مرحبا اخوي ابوشهاب
بما أن الايقونة يضاف اسمها داخل كلاس class فهي تعتبر كلاس مثل اي كلاس اخر يمكن التحكم واضافة خصائص css عادية
فمثلا اذا كانت الايقونة مضافة في فقرة داخل وسم <i> وتكون بالشكل التالي :

HTML & CSS

<class="icon-close"></i
فتضاف خصائصها في css بالشكل التالي :

HTML & CSS

.icon-close {
font-size15px;
color#000; 
اما اذا كانت داخل وسم رابط مثل :

HTML & CSS

<a href="" class="icon-close"></a
فيضاف اسمها في خصائص متبوعا ً بـ a
مثال :

HTML & CSS

a.icon-close {
font-size15px;
color#000; 
هناك ايضا معلومات اضافية كتبتها في رد بأحد المواضيع في قسم الطلبات يمكنك مراجعتها :
طريقة إستبدال ازرار الموضوع بخطوط awsome font




توقيعي



عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).




   رقم المشاركة [ 7 ]
19-02-2015, 09:28 PM
:: منتدى الجزائر ::- لكل الجزائريين والعرب
6129
الصورة الرمزية لـ أبو شهاب
أبو شهاب
غير متواجد
[ مطوّر فعّال ]

اسمي : أبو شهاب , من : الجزائر ,
تاريخ الإنضمام23-08-2013 عدد المشاركات142 تقييم المستوى167 الدولةalgeria
الإعجابات التي قدمها للأعضاء 33   تم شكره 7 مرة في 6 مشاركة
افتراضي رد: طريقة استخدام مكتبة fontello بالتفصيل


اها ممتاز استاذي
بارك الله فيك




توقيعي

:: منتدى الجزائر :: لكل الجزائريين والعرب

http://alg4all.net



   رقم المشاركة [ 8 ]
19-02-2015, 10:37 PM
:: منتدى الجزائر ::- لكل الجزائريين والعرب
6129
الصورة الرمزية لـ أبو شهاب
أبو شهاب
غير متواجد
[ مطوّر فعّال ]

اسمي : أبو شهاب , من : الجزائر ,
تاريخ الإنضمام23-08-2013 عدد المشاركات142 تقييم المستوى167 الدولةalgeria
الإعجابات التي قدمها للأعضاء 33   تم شكره 7 مرة في 6 مشاركة
افتراضي رد: طريقة استخدام مكتبة fontello بالتفصيل


كل شيئ تمام استاذي
فقط اريد ان اعرف التعديل على ايقونات موضوع مغلق موضوع جديد اضافة رد ...
كيف اضع الايقونة وبجانبها الكتابة ؟؟




توقيعي

:: منتدى الجزائر :: لكل الجزائريين والعرب

http://alg4all.net



   رقم المشاركة [ 9 ]
19-02-2015, 11:43 PM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]

اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,868 تقييم المستوى17882 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 286   تم شكره 747 مرة في 568 مشاركة
افتراضي رد: طريقة استخدام مكتبة fontello بالتفصيل


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

HTML & CSS

<a href="" class="icon"></a
لوضع أي كلمة مثل :[ اضافة رد - مغلق - اضافة موضوع جديد ] توضع بالشكل التالي :

HTML & CSS

<a href="" class="icon">اضافة رد</a





توقيعي



عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).



   رقم المشاركة [ 10 ]
28-06-2015, 03:25 PM
7831
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
Yahia
غير متواجد
[ مُطوِّر مشارك ]

اسمي : لا اله الا انت سبحانك اني كنت من الظالمين , من : هوون , أهتم بـ ولا شي بالضرورة .
تاريخ الإنضمام30-01-2015 عدد المشاركات35 تقييم المستوى0 الدولةsyria
الإعجابات التي قدمها للأعضاء 3   تم شكره 2 مرة في 2 مشاركة
افتراضي رد: طريقة استخدام مكتبة fontello بالتفصيل


معلش تحملني..

هلق انا عملت داونلود للايقونات كلياتا .. ارفعها ع الموقع ؟

والكلاس الي حكيت عنه هاد وين حطو ؟؟ بالفورم هوم ولا وين




 

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
مكتبة, استخدام, بالتفصيل, fontello, طريقة

أدوات الموضوع إبحث في الموضوع
إبحث في الموضوع:

البحث المتقدم

الانتقال السريع

المواضيع المتشابهه للموضوع: طريقة استخدام مكتبة fontello بالتفصيل
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ طلب ] استبدال ازرار الموضوع بايقونات باستخدام مكتبة fontello أبو شهاب طلبات و مشاكل منتديات vBulletin 3.x.x 4 20-02-2015 10:34 PM
[ BBcode ] تغير صورة حالة التواجد للعضو الى font icon لمن يستخدم مكتبة fontello AlM6weR اكواد منتديات vBulletin 3.x.x 5 22-01-2015 02:26 AM
[ برنامج ] بالصور عمليه تنصيب Windows 8.1 بالتفصيل الممل لن تبحث بعد الان!! تعلتل البرامج العامه والشروحات 4 21-09-2013 12:36 PM
شرح طريقة استخدام خاصية الاقتباس المتعدد AlM6weR تطوير المواقع والمنتديات 1 04-03-2013 08:15 PM
شرح قوائم الفوتوشوب " بالتفصيل " بشاير البرامج العامه والشروحات 2 14-05-2011 03:55 PM


الساعة الآن 12:14 AM

RSS RSS 2.0 XML Sitemap Sitemap1 Sitemap2 MAP2 HTML Tags اتصل بنا بيان الخصوصية الصعود للاعلى

Powered by vBulletin@Version 3.8.7 .Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
المشاركات والمواضيع تعبر عن رأي كاتبها وليس بالضرورة رأي المطوّر
وجميع الحقوق محفوظة لاصحابها