آموزش نحوه استفاده کردن از فونت آیکن ها در Input field

[m3hdi 15]

باز هم یک مشکل و باز هم حل یک مشکل :دی

قبلا برای اینکه برای دکمه های ارسالتون یک آیکنی قرار بدهید مجبور بودید از دستور background-image استفاده کنید که مشکلات خودش هم داشت ، اما اگر بخواهید در سایتتون از فونت آیکن استفاده کنید چی ؟

موضوع از کجا شروع شدش ، در پروژه خودم از فونت آیکن های مربوط به سایت Font Awesome استفاده میکردم . به یه موقعیتی رسیدم که میخواستم سرچ باکس ایجاد کنم و درون دکمه Submit سرچ ام از فونت آیکن Search Icon استفاده کنم . برای شروع کار اومدم به صورت زیر کدهام قرار دادم که یه کم مسخره هم بود ، اما خوب تست بود !!!

<input type="submit" id="searchsubmit" value="<i class="fa fa-search"></i> "/>

همونطور که می دونید داخل Value مربوط به Button ها عبارت و مقدار بروی دکمه ها قرار می گیرد که من اومدم با استفاده از کدهای مربوط به فونت آیکن Font Awesome از ساختار دستور <i class="fa fa-search"></i> استفاده کردم که کاملا اشتباه بود .

راه دوم پیش گرفتم :

اومدم و ساختار دستورات مربوط به فونت آیکن ها را بررسی کردم و به این پی بردم که فونت آیکن Font Awesome از یه ساختار یا همون cheat sheet داره استفاده میکنه که با وارد کردن اون مقدار cheatsheet می توانیم به آیکن مورد نظر خودمون برسیم . خوب به سری نتایج رسیدم و اومدم به value مربوط به Button خودم مقدار "  " که برابر با علامت آیکن سرچ قرار دادم . به صورت زیر

<input type="submit" id="searchsubmit" value=""/>

بعد از Refresh کردن سایت باز یه مشکل داشتم و اون اینکه عبارت "  " بر روی دکمه رو نمایش میداد !! باز با یک کم بررسی ساختار Font Awesome دیدم هر جا دستورات Font Awesome آمده در کدهای CSS ان از دستور Font-family استفاده شده که نام فونت آیکن فراخوانی میکند . برای همین من کدهای زیر را به دکمه جستجو خودم دادم .

.search-box [type="submit"] {
font-family: FontAwesome;
}

و در آخر به نتیجه دلخواه خودم رسیدم ...

چند تا نکته ::

- فونت آیکن ها سبک جدیدی در طراحی وب به وجود آوردند به طوری که دیگه کمتر کسی از آیکن های PNG استفاده میکنه . مهمترین مزیت فونت آیکن سرعت لود بالا به دلیل استفاده از فونت و قابلیت ریسپانسیو بودن آن و همچنین بزرگ و کوچک کردن اون بدون افت سایت می باشد .

- بهترین فونت آیکنهایی که موجود و اکثر طراحان وب از اون استفاده میکنند سایت Font Awesome که استفاده و کار با اون خیلی خیلی راحت هستش و در سایت توضیح داده است . شما فقط کافی CSS + Font های مربوط بهش در پروژه تون فراخوانی کنید و لذت ببرید ازش .

- برای استفاده از برگه تقلب یا همون Cheat Sheet مربوط به این فونت آیکن میتوانید به لینک Cheat Sheat آن مراجعه کنید . { این که به چه درد میخوره ، خیلی راحت بگم : مواردی مثل بالا که بهتون توضیح دادم ، و اینکه مثلا دارید متنی تایپ میکنید میخواهید از یه سری آیکن استفاده کنید که کافی از این Cheat Sheat استفاده بکنید .

امیدوارم از این آموزش هرچند سبک و کوچیک خوشتون اومده باشه ....

خوش باشید و موفق