salima
10-30-2013, بتوقيت غرينيتش 09:36 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ظƒظٹظپظٹط© ط¥ط¶ط§ظپط© ط§ظٹظ‚ظˆظ†ط© ظ‚ط¨ظ„ ط§ظ„ظ†طµ ط¨طھظ‚ظ†ظٹط© Css (http://www.dzbatna.com/t1921542/)
الـسلام عليكم ورحمة الله وبركاته ، بسم الله الرحمن الرحيم
أخـباركم يالغالين ،، إن شاء الله بخير دايـماً ..
الأن أقدم لكم ،’
شرح طريقة كيفية إضافة ايقونة قبل النص بتقنية Css
مثـال مباشر ..
Text Icons - Progs4u.net (http://www.progs4u.net/vb/example/text-icons)
فحص html هنــــا (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.progs4u.net%2Fvb%2Fexample%2F text-icons%2F) ، فحص css هنــــا (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.progs4u.net%2Fvb%2Fexample%2F text-icons%2F)
================================================== ===
اولاً : نضيف كود code التالى ..
رمز Code:
<span></span>
http://www.progs4u.net/vb/attachment.php?attachmentid=1154&stc=1&d=1312895098
وبعد ذلك نضيف كلاس بإى اسم ..
رمز Code:
<span class="icons"></span>
http://www.progs4u.net/vb/attachment.php?attachmentid=1155&stc=1&d=1312895098
تمـام وبعد ذلك نضيف النص او الكلام ..
رمز Code:
<span class="icons">معهد برامج فور يو</span>
http://www.progs4u.net/vb/attachment.php?attachmentid=1156&stc=1&d=1312895098
كده خلصنا التوزيع ، الأن نكتب اكواد سى اس اس Css
نضيف اسم كلاس وبعد ذلك نضيف مسار ايقونة ( صورة ) ..
ونضيف كود code ايقونة لا تتكرار ( no-repeat ) ونضيف كود code المكان ايقونة ( Right )
ملاحظة فى كود code المكان : لو النص فى اليمين يبقى نكتب Right علشان نجعل ايقونة فى يمين ..
ولو النص فى الشمال يبقى نكتب Left علشان نجعل ايقونة فى شمال ..
وبعد ذلك نضيف كود code المكان نص Text-align حسب ايقونة ..
http://www.progs4u.net/vb/attachment.php?attachmentid=1160&stc=1&d=1312895745
ده شكل نهائى
http://www.progs4u.net/vb/attachment.php?attachmentid=1158&stc=1&d=1312895651
فى مشكلة صح ، ولكن عادى نضيف كود code ابعاد النص Padding
لو ايقونة فى يمين نضيف هذا Padding-Right
ولو ايقونة فى شمال نضيف هذا Padding-Left
طيب ازاى اضف رقم بيسكل ؟ ، طبعا اضف رقم فى مقاس عرض 20px على صورة ( ايقونة ) ..
http://www.progs4u.net/vb/attachment.php?attachmentid=1157&stc=1&d=1312895098
ده شكل نهائى
http://www.progs4u.net/vb/attachment.php?attachmentid=1159&stc=1&d=1312895651
إنتهت ،، تم بحمد لله
المصدر : هنـــــــا (http://www.progs4u.net/vb/showthread.php?t=4525)
والـسلام عليكم ..
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
الـسلام عليكم ورحمة الله وبركاته ، بسم الله الرحمن الرحيم
أخـباركم يالغالين ،، إن شاء الله بخير دايـماً ..
الأن أقدم لكم ،’
شرح طريقة كيفية إضافة ايقونة قبل النص بتقنية Css
مثـال مباشر ..
Text Icons - Progs4u.net (http://www.progs4u.net/vb/example/text-icons)
فحص html هنــــا (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.progs4u.net%2Fvb%2Fexample%2F text-icons%2F) ، فحص css هنــــا (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.progs4u.net%2Fvb%2Fexample%2F text-icons%2F)
================================================== ===
اولاً : نضيف كود code التالى ..
رمز Code:
<span></span>
http://www.progs4u.net/vb/attachment.php?attachmentid=1154&stc=1&d=1312895098
وبعد ذلك نضيف كلاس بإى اسم ..
رمز Code:
<span class="icons"></span>
http://www.progs4u.net/vb/attachment.php?attachmentid=1155&stc=1&d=1312895098
تمـام وبعد ذلك نضيف النص او الكلام ..
رمز Code:
<span class="icons">معهد برامج فور يو</span>
http://www.progs4u.net/vb/attachment.php?attachmentid=1156&stc=1&d=1312895098
كده خلصنا التوزيع ، الأن نكتب اكواد سى اس اس Css
نضيف اسم كلاس وبعد ذلك نضيف مسار ايقونة ( صورة ) ..
ونضيف كود code ايقونة لا تتكرار ( no-repeat ) ونضيف كود code المكان ايقونة ( Right )
ملاحظة فى كود code المكان : لو النص فى اليمين يبقى نكتب Right علشان نجعل ايقونة فى يمين ..
ولو النص فى الشمال يبقى نكتب Left علشان نجعل ايقونة فى شمال ..
وبعد ذلك نضيف كود code المكان نص Text-align حسب ايقونة ..
http://www.progs4u.net/vb/attachment.php?attachmentid=1160&stc=1&d=1312895745
ده شكل نهائى
http://www.progs4u.net/vb/attachment.php?attachmentid=1158&stc=1&d=1312895651
فى مشكلة صح ، ولكن عادى نضيف كود code ابعاد النص Padding
لو ايقونة فى يمين نضيف هذا Padding-Right
ولو ايقونة فى شمال نضيف هذا Padding-Left
طيب ازاى اضف رقم بيسكل ؟ ، طبعا اضف رقم فى مقاس عرض 20px على صورة ( ايقونة ) ..
http://www.progs4u.net/vb/attachment.php?attachmentid=1157&stc=1&d=1312895098
ده شكل نهائى
http://www.progs4u.net/vb/attachment.php?attachmentid=1159&stc=1&d=1312895651
إنتهت ،، تم بحمد لله
المصدر : هنـــــــا (http://www.progs4u.net/vb/showthread.php?t=4525)
والـسلام عليكم ..
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©