قراردادن عکس در select box

بازدید37.4kپست ها1آخرین فعالیت2 سال پیش
0
0

سلام.می خواستم بدونم با html یا css میشه عکسی با سایز کوچکی را در select box کنار متنی که وجود دارد قرار داد؟

0

درود
بله میشه این کار رو انجام داد فقط این که حتما باید از آیکن های font awesome یا flat icon یا سایت های مثل اینها که سرویس آیکن ها به صورت فونت ارائه می دهند، استفاده بشه.
من نمونه کد برای قرار دادن آیکن های سایت font awesome رو داخل select box مینویسم فقط باید برای اجرا شدن حتما فونتهای font awesome و همچنین css های آخرین ورژن font awesome داخل فایل html وارد (import) کرده باشید.
[توضیح: سایت font awesome به خاطر تحریم ها سرویس آنلاینش رو برای ایران بسته، شما میتونید از سایت های ایرانی کلیه فونت ها و cssها رو دانلود کنید و به صورت local وارد کنید]
مثال:
کد HTML:

<div class="font-awesome">
  <select class="fa">
      <option value="">Select</option>
      <option value="edit" class="fa">&#xf303 Edit</option>
      <option value="contact" class="fa">&#xf2b9 Contacts</option>
  </select>
</div>

کد CSS:

select{
  padding:8px 5px;
  border-radius:5px;
  color:#333;
  width:250px;
}
.font-awesome .fa{
  font-family: "Font Awesome 5 Free", Open Sans;
  font-weight:501;
}

نمایش نتیجه:
https://codepen.io/absekh/pen/bGWZWor

فقط فراموش نکنید که کدهای من قسمت اتصال font awesome به صفحه html رو نداره به دلیل این که نمیتونم فایلهای font awesome رو اینجا در اختیارتون بذارم یه سرچ کوچیک بزنید پیدا می کنید.
[توضیح: با استفاده از تگ link میتونید cssهای font awesome رو به صفحه html متصل کنید.]

آخرین ویرایش: 13-08-2021 ???? 02:29، توسط عباس اختیاری

سوال برنامه نویسی دارید؟

ندونستن عیب نیست، نپرسیدن چرا!

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.