كيف أضيف أيقونة على شكل مكبر بداخل حقل نصي؟

من الخصائص التي تُستعمل في ملف التنسيق css، خصائص التموضع: top,left,bottom و Right الهدف منها إزاحة العنصر بعدد من البيكسلات من جهة واحدة أو من جهات متعددة، عن طريق إعطاء قيمة خاصيتين مثلا left=10px و top=6px أي 10بيكسل من الفوق و6 من جهة اليسار. وهذا ما سنفعل بالنسبة لأيقونة المكبر:

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* عوضه بمسار صورة الأيقونة */
}

*ملاحظة: يمكن تغيير قيمة الخاصيتين  left و top حتى تظهر في المكان الصحيح، وبشكل يتناسب مع الصورة النهائية لتصميمك، هذا مثال توضيحي فقط.