آموزش foundation-آیکن ها

چاپ

آیکن ها در فریم ورک foundation

فریم ورک foundation دارای 283 آیکن است که می توانند به وسیله ی CSS استایل دهی شوند: شما می توانید اندازه ها و رنگ و استایل را کنترل کنید. 

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

در زیر، چند مثال از آیکن های فریم ورک foundation وجود دارند: 

آیکن رفرش:   

آیکن تیک:   

آیکن خانه:   


نحوه ی ایجاد آیکن

یک آیکن، به وسیله ی دستور زیر ایجاد می شود: 

<i class="fi-name"></i>

مقدار name در عبارت بالا، باید با یک نام آیکن مناسب جایگزین شود. 

برای استفاده از آیکن ها، شما باید برگه ی استایل آیکن های فریم ورک foundation را در قسمت <head> از صفحه ی خود، لینک نمایید:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">

مثالی از آیکن ها

مثال زیر، راه های مختلف استفاده از آیکن ها را نشان می دهد: 

مثال

<p>Cloud icon: <i class="fi-cloud"></i></p> 
<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 هشت کلاس مشخص می شود. 

مثال

<div class="icon-bar five-up">
  <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> استفاده کنید تا آیکن را شرح دهید: 

مثال

<div class="icon-bar five-up">
  <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. باعث می شود که آیکن مورد نظر غیر قابل کلیک باشد:

مثال

<a href="#" class="item disabled">
  <i class="fi-share"></i>
</a>

<a href="#" class="item disabled">
    <i class="fi-mail"></i>
</a>

نتیجه:

 
خودتان امتحان کنید »

کلاس vertical. یک نوار آیکن افقی را ایجاد می کند: 

مثال

<div class="icon-bar vertical five-up">
  ....
</div>

نتیجه:

 
خودتان امتحان کنید »

مرجع کامل آیکن های فریم ورک foundation

 برای مشاهده ی یک مرجع کامل از تمام آیکن ها، به مرجع آیکن های foundation مراجعه کنید.