شرح وضع ايقونة بجانب الرابط css

سجل في : 13/06/2008

الـسلام عليكم ورحمة الله وبركاته ، بسم الله الرحمن الرحيم

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

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

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

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

http://www.progs4u.net/vb/example/text-icons

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

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

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

كود:



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

كود:



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

كود:

معهد برامج فور يو

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

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

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

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

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

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

ده شكل نهائى

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

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

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

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

ده شكل نهائى

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

مواضيع جديدة

شرح وضع ايقونة بجانب الرابط css

تفضّل شارك بتعليقك