فونت‌آیکون و نحوه استفاده از آن‌ها

در این مقاله درباره‌ی فونت‌آیکون صحبت و چند کتابخانه فونت‌آیکون را نیز معرفی می‌کنیم.

فونت‌آیکون‌ها چیستند؟

فونت‌آیکون‌ها، فونت‌هایی هستند که به جای اعداد و حروف دارای نماد‌ها و گلیف‌ها می‍باشند. این نوع فونت‌ها به دلیل اینکه به راحتی می‌توان استایل آن‌ها را با CSS تغییر داد، در بین توسعه‌دهندگان فرانت‌اند از محبوبیت زیادی برخوردارند. همچنین به دلیل اینکه از فرمت وکتور هستند، مقیاس‌پذیر نیز می‌باشند.

مزایا و معایب

فواید زیادی در استفاده از فونت‌آیکون در یک پروژه به جای تصویر (Image Bitmap). چند مورد از این فواید:

● مانند فونت معمولی هر نوع تنطیمات CSS را می‌توان بر روی آن‌ها اعمال کرد.

● چون از فرمت گرافیکی ویکتور هستند، مقیاس‌پذیزند. یعنی می‌توان به راحتی آن‌ها را کوچک و بزرگ کرد بدون اینکه در کیفیت آن‌ها تغییری ایجاد شود.

● برای بارگذاری آن‌ها از یک یا تعداد کمی HTTP request استفاده می‌شود.

● به خاطر حجم کمترشان سرعت بارگذاری بالاتری دارند.

● در تمام مرورگرها پشتیبانی می‌شوند.

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

فونت‌آیکون‌ها بر اساس گریدهای (Grid) خاصی طراحی شده‌اند و اگر به هر دلیلی سیستم گرید آن‌ها را تغییر دهید، ممکن است نتیجه مناسبی نداشته باشد.

کتابخانه‌ها

● ‌Font Awesome

کتابخانه Font Awesome یک مجموعه غنی از 439 آیکون است. این کتابخانه چه برای استفاده شخصی چه برای استفاده تجاری کاملا رایگان است. Font Awesome در اصل برای Bootstrap ساخته شده بود ولی مشکلی در استفاده از آن با دیگر فریم‌ورک‌ها وجود ندارد. مطالعه بیشتر

نمونه کد html :

<li>
    <a href=&quot#&quot data-name=&quotHome&quot>
        <i class=&quotfa fa-home fa-2x&quot></i>
    </a>
</li>
<li>
    <a href=&quot#&quot data-name=&quotAbout&quot>
        <i class=&quotfa fa-bullhorn fa-2x&quot></i>
    </a>
</li>

نمونه کد CSS :

nav li {
    background: #ededed;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
}

nav li:not(:first-child) {
      margin-top: 1px;
}

nav li a {
    outline: none;
    position: relative;
    width: 100%;
    height: 100%;
}

nav i {
    color: steelblue;
    vertical-align: middle;
}

nav li a:after {
    background: #ededed;
    content: attr(data-name);
    display: none;
    margin-left: 1px;
    width: 160px;
    height: 80px;
    left: 80px;
    position: absolute;
    font-size: 1.2em;
}

nav li a:hover:after {
    display: inline-block;
}

نتیجه :

● ‌IcoMoon

کتابخانه IcoMoon نیز یک کتابخانه معروف فونت‌آیکون است. این کتابخانه دو پک دارد یک پک رایگان و یک پک پرمیوم. بسته به پک مورد نظر تعداد آیکون‌ها متفاوت است. پک رایگان دارای 450 آیکون و پک پرمیوم 1266 آیکون دارد.

همچنین این کتابخانه یک اپلیکیشن آنلاین که کاربر می‌تواندآیکون مورد نظر خود را جستجو و دانلود کند.
مطالعه بیشتر

نمونه کد html :

<li>
    <span class=&quoticon-pencil&quot></span>
    Analyze
</li>
<li> + </li>
<li>
    <span class=&quoticon-paint-format&quot></span>
    Design
</li>
<li> + </li>

نمونه کد CSS :

section li:nth-child(even) {  
  color: #ededed;
  width: 6%;
  font-size: 2.5em;
  height: 63px;
  margin-top: 31.5px;
  line-height: 63px;
}

section span {
  padding: 15px 0;
  font-size: 5em;
  display: block;
  color: steelblue;
  transition: all .2s ease-in-out;
}

section li:hover span {
  transform: translateY(-10px);
}

نتیجه :

برخی دیگر از کتابخانه‌ها

‌● Entypo

‌● Flaticon

‌● Icofont

‌● Flaticon

‌● Flaticon

‌● Flaticon