آموزش foundation-آیکن ها
آیکن ها در فریم ورک foundation
فریم ورک foundation دارای 283 آیکن است که می توانند به وسیله ی CSS استایل دهی شوند: شما می توانید اندازه ها و رنگ و استایل را کنترل کنید.
آیکن های مورد نظر می توانند در متن ها و دکمه ها و نوارابزارها و ناوبری ها و فرم ها و ... استفاده شوند.
در زیر، چند مثال از آیکن های فریم ورک foundation وجود دارند:
آیکن رفرش: 
آیکن تیک: 
آیکن خانه: 
نحوه ی ایجاد آیکن
یک آیکن، به وسیله ی دستور زیر ایجاد می شود:
مقدار name در عبارت بالا، باید با یک نام آیکن مناسب جایگزین شود.
برای استفاده از آیکن ها، شما باید برگه ی استایل آیکن های فریم ورک foundation را در قسمت <head> از صفحه ی خود، لینک نمایید:
مثالی از آیکن ها
مثال زیر، راه های مختلف استفاده از آیکن ها را نشان می دهد:
مثال
<p>Cloud icon as a link:
<a href="#"><i class="fi-cloud"></i></a>
</p>
<p>Styled Cloud icon: <i class="fi-cloud" style="font-size:35px;color:red;"></i></p>
<p>Home icon: <i class="fi-home"></i></p>
<p>Home icon on a button:
<button type="button" class="button">
<i class="fi-home"></i> Home
</button>
</p>
<p>Home icon on a green button:
<button type="button" class="button success">
<i class="fi-home"></i> Home
</button>
</p>
<p>Home icon on a large, light blue link button:
<a href="#" class="button info large">
<i class="fi-home"></i> Home
</a>
</p>
نتیجه:
نوار آیکن
به وسیله ی کلاس icon-bar. می توانید یک نوار آیکن را ایجاد کنید. و برای اینکه مطوئن شوید که آیتم ها به طور مساوی فاصله گذاری می شوند، تعداد آیتم ها را مشخص کنید.
نکته: تعداد آیتم ها را می توانید با استفاده از کلاس های one-up. تا eight-up. مشخص کنید. همان طور که می دانید از one تا eight هشت کلاس مشخص می شود.
مثال
<a href="#" class="item">
<i class="fi-home"></i>
</a>
<a href="#" class="item">
<i class="fi-share"></i>
</a>
<a href="#" class="item">
<i class="fi-info"></i>
</a>
<a href="#" class="item">
<i class="fi-mail"></i>
</a>
<a href="#" class="item">
<i class="fi-magnifying-glass"></i>
</a>
</div>
نتیجه:
از عنصر <label> استفاده کنید تا آیکن را شرح دهید:
مثال
<a href="#" class="item">
<i class="fi-home"></i>
<label>Home</label>
</a>
<a href="#" class="item">
<i class="fi-share"></i>
<label>Share</label>
</a>
<a href="#" class="item">
<i class="fi-info"></i>
<label>Info</label>
</a>
<a href="#" class="item">
<i class="fi-mail"></i>
<label>Mail</label>
</a>
<a href="#" class="item">
<i class="fi-magnifying-glass"></i>
<label>Search</label>
</a>
</div>
نتیجه:
کلاس disabled. باعث می شود که آیکن مورد نظر غیر قابل کلیک باشد:
مثال
<i class="fi-share"></i>
</a>
<a href="#" class="item disabled">
<i class="fi-mail"></i>
</a>
نتیجه:
کلاس vertical. یک نوار آیکن افقی را ایجاد می کند:
مرجع کامل آیکن های فریم ورک foundation
برای مشاهده ی یک مرجع کامل از تمام آیکن ها، به مرجع آیکن های foundation مراجعه کنید.
- نوشته شده توسط احسان عباسی
- بازدید: 5834
