أهلا وسهلا بك زائرنا الكريم في JO1R FORUM | منتديات شباب و صبايا الأردن، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

شرح كيفية إضافة ايقونة قبل النص بتقنية Css

الـسلام عليكم ورحمة الله وبركاته ، بسم الله الرحمن الرحيم أخـباركم يالغالين ،، إن شاء الله بخير دايـماً الأن أقدم لكم ،’ شرح كيفية إضافة ايقونة قبل ال


  1. JO1R FORUM | منتديات شباب و صبايا الأردن
  • •• آلمنتديآت آلتقنيـﮧ « Technical Information
  • قسم تصميم و تطوير المواقع
  • .:. تطوير المنتديات .:.
  • شرح كيفية إضافة ايقونة قبل النص بتقنية Css
    • اضافة رد جديد اضافة موضوع جديد


    subject icon شرح كيفية إضافة ايقونة قبل النص بتقنية Css
    09-08-2011 04:40 مساءً
    صورة امير النور الشخصية
    امير النور
    عضو سوبر ستار
    rating
    معلومات الكاتب ▼
    تاريخ الإنضمام : 08-07-2007
    رقم العضوية : 27
    المشاركات : 3,191
    الجنس :
    قوة السمعة : 3,799
    الـسلام عليكم ورحمة الله وبركاته ، بسم الله الرحمن الرحيم

    أخـباركم يالغالين ،، إن شاء الله بخير دايـماً ..

    الأن أقدم لكم ،’

    شرح كيفية إضافة ايقونة قبل النص بتقنية Css

    مثـال مباشر ..

    Text Icons - Progs4u.net

    فحص html هنــــا ، فحص css هنــــا

    ================================================== ===

    اولاً : نضيف كود التالى ..

    رمز Code:


    attachment

    وبعد ذلك نضيف كلاس بإى اسم ..

    رمز Code:


    attachment

    تمـام وبعد ذلك نضيف النص او الكلام ..

    رمز Code:
    معهد برامج فور يو

    attachment

    كده خلصنا التوزيع ، الأن نكتب اكواد سى اس اس Css

    نضيف اسم كلاس وبعد ذلك نضيف مسار ايقونة ( صورة ) ..

    ونضيف كود ايقونة لا تتكرار ( no-repeat ) ونضيف كود المكان ايقونة ( Right )

    ملاحظة فى كود المكان : لو النص فى اليمين يبقى نكتب Right علشان نجعل ايقونة فى يمين ..

    ولو النص فى الشمال يبقى نكتب Left علشان نجعل ايقونة فى شمال ..

    وبعد ذلك نضيف كود المكان نص Text-align حسب ايقونة ..

    attachment

    ده شكل نهائى

    attachment

    فى مشكلة صح ، ولكن عادى نضيف كود ابعاد النص Padding




    لو ايقونة فى يمين نضيف هذا Padding-Right

    ولو ايقونة فى شمال نضيف هذا Padding-Left

    طيب ازاى اضف رقم بيسكل ؟ ، طبعا اضف رقم فى مقاس عرض 20px على صورة ( ايقونة ) ..

    attachment

    ده شكل نهائى

    attachment

    إنتهت ،، تم بحمد لله

    المصدر : هنـــــــا

    والـسلام عليكم ..

    توقيع :امير النور
    l7njo.com-f7d633e1d2

    اضافة رد جديد اضافة موضوع جديد




    الكلمات الدلالية
    لا يوجد كلمات دلالية ..

    « كيف انزل استايل من لوحة التحكم | كود التظليل يظهر بالفايرفوكس والاكسبلورر ما يظهر لاذاعة قران كريم .. عاجل »








    الساعة الآن 06:26 PM