آموزش قرار دادن آیکن ( Icon ) در Placeholder به زبان ساده
چگونه یک آیکن را درون یک Placeholder بگذاریم؟ چندر روز قبل نکته ای در مورد نحوه ی استایل دهی به Placeholder در انجمن تخصصی فناوری اطلاعات ایران بیان کردم که در آن به بررسی و راه حل استایل دهی به Placeholder مانند رنگ فونت، سایز، و نوع فونت و... پرداختم، یکی از دوستان ITPro یی سوالی مطرح کردن در این زمینه، اینکه اگر بخواهیم به جای متن، آیکون داخل Placeholder قرار دهیم راهی وجود دارد یا خیر. در پاسخ باید گفت که بله وجود دارد. من در این نکته ی آموزشی به بررسی و آموزش قرار دادن آیکون داخل Placeholder می پردازم.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
Placeholder Icon
برای این کار ما نیاز به Bootstrap داریم، برای دانلود Document مربوط به Bootstrap دو راه وجود دارد، یکی اینکه با مراجعه به این سایت Document مربوط به آن را دانلود کنیم، و در پروژه ی خود اضافه کرده و استفاده نماییم یک راه حل دوم هم برای برنامه نویسانی که از VisualStudio استفاده می کنند وجود دارد و آن هم اینکه با استفاده از ابزار NuGet Package Manager اقدام به دانلود Bootstrap کنند که با این کار خود VisualStudio به صورت خودکار پوشه بندیه مناسب را انجام داده و آماده می کند، و برنامه نویس با لینک دادن فایل های CSS به صفحه ی HTML میتواند به راحتی از آن استفاده کند. در اینجا من نمونه ای از فایل ها لینک داده شده به صفحه ی HTML را قرار داده ام.
<!DOCTYPE html>
<html>
<head>
<title>صفحه ی تست</title>
<meta charset="utf-8" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
دقت کنید که آدرس فایل ها میتواند بر اساس فولدر بندی متغیر باشد. در داخل فولدر Bootstrap فولدری تحت عنوان Fonts وجود دارد که برای قرار دادن آیکون داخل Placeholder به آن نیاز داریم و از فایل های CSS که در Bootstrap قرار دارد برای زیبایی فرم ورود اطلاعات استفاده کرده ام. اولین گام برای فونت ها اضافه کردن آن به صفحه ی اصلی CSS می باشد که برای این کار باید از font-face@ استفاده کرد. در CSS اگر بخواهیم از فونتی استفاده کنیم که در تمامی مرورگرها پشتیبانی شود، باید از font-face@ استفاده کنیم، نحوه ی اضافه کردن فونت ها به صفحه ی اصلی CSS را در اینجا ذکر کردیم
@font-face {
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');
src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
دقت کنید که آدرس های استفاده شده در این کدها بر اساس فولدر بندی متغیر می باشد. همچنین نامی که برای Font-Family انتخاب شده است،کاملا داخواه می باشد، هر زمان که من بخواهم از این فونت در پروژ ی خود استفاده کنم، کافیست نامی که برای Font-family در اینجا تعیین کرده ام، برای سایر المان ها نیز استفاده کنم. پس از اضافه کردن فونت ها به صفحه ، نوبت به استایل دهی به Placeholder می باشد، برای استایل دهی به Placeholder همان طور که قبلا هم ذکر شد باید برای تمامی مرورگرها جداگانه کد نوشت که در اینجا مشاهده می کنید.
.Name::-webkit-input-placeholder {
color: red;
font-size: 1em;
}
.Name:-moz-placeholder {
color: red;
font-family: Glyphicons Halflings;
font-size: 1em;
}
.Name::-moz-placeholder {
color: red;
font-family: Glyphicons Halflings;
font-size: 1em;
}
.Name:-ms-input-placeholder {
color: red;
font-family: ;
font-size: 1em;
}
.Mail::-webkit-input-placeholder {
color: blue;
font-family: Glyphicons Halflings;
font-size: 1em;
}
.Mail:-moz-placeholder {
color: blue;
font-family: Glyphicons Halflings;
font-size: 1em;
}
.Mail::-moz-placeholder {
color: blue;
font-family: Glyphicons Halflings;
font-size: 1em;
}
.Mail:-ms-input-placeholder {
color: blue;
font-family: Glyphicons Halflings;
font-size: 1em;
}
.Message::-webkit-input-placeholder {
color: green;
font-family: Glyphicons Halflings;
font-size: 1.5em;
}
.Message:-moz-placeholder {
color: green;
font-family: Glyphicons Halflings;
font-size: 1.5em;
}
.Message::-moz-placeholder {
color: green;
font-family: Glyphicons Halflings;
font-size: 1.5em;
}
.Message:-ms-input-placeholder {
color: green;
font-family: Glyphicons Halflings;
font-size: 1.5em;
}
کلاس های Mail. و Name. و Message. به منظور متفاوت بودن رنگ فونت های Placeholder ها تعریف شده است. پس از آن که کد های CSS تکمیل شد، نوبت به کد های HTML می باشد. در HTML کاره خاصی نباید انجام داد، جز اینکه به جای یک متن داخل Placeholder از آیکون استفاده کنیم. اما منظور استفاده از یک عکس یا صدا زدن یک class نیست.
برای ایجاد آیکون از فونت های glyphicons-halflings-regular استفاده می کنیم، فونت های glyphicons-halflings-regular در واقع یک نوع کد می باشد که شبیه کد Hex است ، برای دریافت این کدها و این که آیکون مورد نظر دارای چه کدی می باشد میتوانید به سایت glyphicons مراجعه کنید و کد های مربوط به هر آیکون را دریافت کنید. پس از آنکه کد آیکون مورد نظر خود را دریافت کردید، تنها کاری که باید انجام دهید این است که کد را داخل مشخصه ی Placeholder در تگ Input وارد کنید.
<form>
<label class="label-panel-Admin">نام</label>
<input type="text" placeholder="" class="Name form-control"/>
<br/>
<label class="label-panel-Admin">ایمیل</label>
<input type="email" placeholder="✉" class="Mail form-control"/>
<br/>
<label class="label-panel-Admin">پیام</label>
<textarea placeholder="" class="Message form-control" rows="10"></textarea>
</form>
همان طور که میبینید من در اینجا از کد ;xe008&# برای آیکون User و همچنین از کد ;x2709&# برای آیکون ایمیل و از کد ;xe111&# برای آیکون پیام استفاده کردم. خروجی کد بالا به این صورت می باشد.
همان طور که مشاهده می کنید، به جای متن در داخل placeholder ها آیکون قرار گرفته است که این کار میتواند بسیار بر روی ظاهر فرم ورود اطلاعات ما تاثیر گذار باشد و فرم ما را کاربر پسند تر کند. امیدوارم نکته ای که آموزش دادم مفید بوده باشه. توسینسو باشید!