[ CSS ] شرح وضع ايقونة قبل او بعد الرابط في الموقع

[ CSS ] شرح وضع ايقونة قبل او بعد الرابط في الموقع

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

[ CSS ] وضع ايقونة قبل او بعد الرابط في الموقع

موضوع بسيط في CSS وهو عن طريقة وضع ايقونة او صورة قبل الرابط , او حتى النصوص في المدونة والموقع نبداء .
وهذا مثال قمت به  لكم : من هنا .

اولا : لنفترض ان لدينا هذا الكود وهو كود رابط عادي ؟ :

 <div class='link-25'>
    <a href='http://blog.7lolblogger.com'> مدونة حلول بلوجر </a>
  </div>

وسيكون شكله داخل صفحة html هكذا :

مدونة حلول بلوجر

الان هناك طريقتين حسب معرفتي , لاضافة ايقونة قبل الرابط :

الطريقة الاولى من خلال وضع الايقونة كخلفية يمين الرابط :

 وسنقوم بذالك من خلال تحديد الكلاس الاساسي للرابط , مث تعديل صفات الرابط ووضع خلفية له , على العموم سنأخذها خطوة خطوة , سنقوم بتعديل الكود السابق ونضيف له خصائص css :

  <div class='link-25'>
    <a href='http://blog.7lolblogger.com'> مدونة حلول بلوجر</a>
  </div>
<style>
  .link-25 a {
background: transparent url(https://jetara.googlecode.com/svn/trunk/06812.png);
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
color: #004BCF;
font-weight: bold;
text-decoration: none;
}
</style>

ليصبح شكل الرابط داخل الصفحة هكذا :

مدونة حلول بلوجر

الان سأشرح الاكواد الملونة :
        : هي خصائص css التي اضفناها الى الرابط , كي نضع ايقونة بجانب الرابط .
        : هو الكلاس الاساسي للرابط , وتلاحظ وجود وسم الرابط <a> بداخله .
        : ثم حددنا الرابط كي نضع له الخصائص.
        : وضعنا له الخلفيه , وهي الايقونة ,  ولاكن سيكون شكلها متككر لذالك وضعنا خاصيه اخرى خلفها.
        : وهي عدم تكرار الصورة.
        : قمنا بتحديد مكان الصورة ( يمين , وسط ).
        : وضعنا فراغ يمين الرابط , كي لا تتداخل الصورة مع الرابط.
        : هذه صفات تجميليه للرابط وهي ( لون الرابط , عرض الرابط , عدم وضع خط اسفل الرابط ).


طبعاَ هذه الطريقة الاولى وتستطيع عملها ليس فقط على الروابط بل وكذالك النصوص والاوسمة الاخرى مثل <span> و <p> .

الطريقة الثانيه وهي من خلال خاصية :before 

نرجع الى الكود الاساسي تبعنا , هذا هو :

<div class='link-25'>
    <a href='http://blog.7lolblogger.com'> مدونة حلول بلوجر </a>
  </div>

سيكون شكله داخل صفحة html هكذا :

مدونة حلول بلوجر

الان سنضيف له هذا الكود :

  <div class='link-26'>
    <a href='http://blog.7lolblogger.com'> مدونة حلول بلوجر</a>
  </div>


<style>
.link-26 a:before {
content: "";
width: 16px;
height: 16px;
background: transparent url(https://jetara.googlecode.com/svn/trunk/06812.png);
display: inline-block;
float: right;
margin: 0 0 0 5px;
padding: 0;
}
  .link-26 a {
float: right;
}
</style>

سيكون شكل الكود داخل صفحة html هكذا :

مدونة حلول بلوجر

      : كلاس الرابط الاساسي.
      : الرابط.
      : خاصية :before
      : مهمه.
      : طول وعرض الايقونة.
      : مكان الايقونة , انا وضعتها يمين , اذا اردت تغيرها الى اليسار فيجب عليك تغير المارجن الى 0 5px 0 0
      : البعد , بمعنى انك تقوم بابعاد الايقونة عن الرابط في اليسار مساحة 5px مثلا.



في النهاية احب التنبيه الى ان الطريقة الاولى هي الاقضل .
وان رابط الايقونة اذا اردت تغيره فهذا هو :https://jetara.googlecode.com/svn/trunk/06812.png

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

عنوان التدوينة :[ CSS ] شرح وضع ايقونة قبل او بعد الرابط في الموقع

ملخص التدوينة:

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

goust

الساعه : 2014-10-11T21:06:00+03:00

تاريخ : 11‏/10‏/2014

من : المملكة العربيه السعوديه

التعليقات : 5

انشرها :

تاق :