آیکون‌فونت چیست و چه کاربردی دارد؟ — آموزش گام به گام

۳۷۳ بازدید

آخرین به‌روزرسانی: ۲۳ اردیبهشت ۱۴۰۲

زمان مطالعه: ۴ دقیقه

آیکون‌فونت چیست و چه کاربردی دارد؟ — آموزش گام به گام

حتما در مورد آیکون و فونت تا به حال شنیده‌ و با آن‌ها کار کرده‌اید. اما «آیکون‌فونت» (Icon Font) چیست؟ در این نوشته در مورد آیکون‌فونت صحبت‌ خواهیم کرد. به علاوه کاربرد آیکون‌فونت برای پویا و زیبا کردن وب‌سایت را توضیح می‌دهیم. بیایید شروع کنیم.

فهرست مطالب این نوشته

آیکون‌فونت چیست؟

اولین قدم‌ ایجاد آیکون‌فونت

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

CSSهای مرسوم

آیکون‌فونت چیست؟

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

آیکون‌فونت را برای شکل‌ دادن به وب‌سایت، مورد استفاده قرار می‌دهند. به دلیل ماهیت «وکتور»ی (vector)، آن‌ها را می‌توان با زبان CSS از نظر اندازه و شکل تغییر یا حرکت داد. این روش مزایای زیادی نسبت به راه سنتی استفاده از تصاویر دارد.

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

اولین قدم‌ ایجاد آیکون‌فونت

اگرچه می‌توان برای این راهکار از مجموعه فونت‌های مختلفی استفاده کرد، اما در ادامه آموزش را با «Font Awesome» پیش خواهیم برد.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

برای آغاز کار به کد HTMLی مشابه آنچه در ادامه آمده است نیاز داریم:

1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title>MUO Icon Fonts</title>
6        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
7        <style>
8            html {
9                font-family: helvetica, arial;
10            }
11        </style>
12    </head>
13    <body>
14
15    </body>
16</html>
17

آنچه در بالا آمده ساده‌ترین کد HTML برای ایجاد یک صفحه‌ی وب است. البته در نوشته‌ای دیگر با عنوان «HTML چیست؟ -- راهنمای مقدماتی و کاربردی» بیشتر به این موضوع پرداخته‌ایم.

مهم‌ترین خط کد به شکل زیر است:

1<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

این کد، «استایل شیت» (یا شیوه‌نامه) Font Awesome را از «CDN» مربوطه فرامی‌خواند. اهمیت موضوع در آن است که بدون این دستور، وب‌سایت نمی‌داند این فونت چیست. با فراخواندن این بسته، بسیاری از مشکلات مانند بارگذاری و اجرای درست فونت‌های تحت وب به خودی خود انجام می‌شود.

آیکون‌های Font Awesome توسط کلاس‌های CSSی که به تگ‌‌های i اضافه می‌شوند تعریف می‌گردند. انتخاب آنها نیز از این جهت بوده است که در مرورگر یا به صورت جداگانه هیچ استایل پیش‌فرضی برای‌شان تعریف نشده است و لذا در اولین استفاده به هیچ عنوان شاهد نمایش نادرست یا به هم ریختگی‌شان نخواهید بود.

اساس کار به شکل زیر است و قطعه کدی که در ادامه آمده را باید بین تگ‌های body قرار دهید.

1<i class="fa fa-cog"></i> My First Icon

چنین دستوری، آيکونی به شکل زیر نمایش می‌دهد.

ّicon font

دیدید که کار چقدر ساده است. حال بهتر است کمی جزئی‌تر بحث کنیم. دو کلاس برای استفاده از Font Awesome مورد نیاز است. اولین کلاس معروف به fa ‌است که فونت مذبور را نمایندگی می‌کند. دومین کلاس آیکون مورد نظر را که می‌تواند هر چیزی مانند هواپیما، تصویر شخص یا کارت اعتباری باشد، تعیین می‌نماید.

در بالا ما آیکونی با عنوان cog را فراخوانی کردیم و به صورت پیش‌فرض در ابتدای نامش عبارت fa نیز قرار گرفته است؛ در اصل اسم این آیکون در هنگام فراخوانی به صورت fa-cog درج می‌شود. در وب‌سایت مربوطه می‌توانید فهرستی از آیکون‌های Font Awesome را ببینید. سعی کنید آیکون‌های دیگر را نیز امتحان کنید.

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

حال که با اساس کار آشنا شدید، بهتر است کمی ترفندهای پیشرفته‌تر را بیاموزید.

فیلم آموزش بوت استرپ – طراحی صفحات وب با Bootstrap 5 در فرادرس

کلیک کنید

اگر مایل نیستید کد CSS بنویسید، می‌توانید از استایل‌های موجود در Font Awesome بهره ببرید. در ادامه کلاس‌هایی برای بزرگ‌تر کردن اندازه‌ی آیکون‌ها مشاهده می‌کنید.

1<i class="fa fa-battery-0 fa-lg"></i>
2<i class="fa fa-battery-1 fa-2x"></i>
3<i class="fa fa-battery-2 fa-3x"></i>
4<i class="fa fa-battery-3 fa-4x"></i>
5<i class="fa fa-battery-4 fa-5x"></i>

ّicon font

کلاس کاربردی دیگر fa-spin است. از این کلاس می‌توان برای چرخش آیکون استفاده کرد. با ترکیب این کلاس با کد تغییر اندازه، امکان ایجاد افکت‌های جذاب وجود دارد. کد مذکور به صورت زیر است:

1<i class="fa fa-refresh fa-spin fa-3x"></i>

که به شکل زیر درمی‌آید:

ّicon font

همچنین به راحتی می‌توان با کلاس fa-rotate، آیکون مورد نظر را در زاویه‌ی مطلوب قرار داد.

1<i class="fa fa-envelope-o fa-3x"></i>
2<i class="fa fa-envelope-o fa-3x fa-rotate-90"></i>
3<i class="fa fa-envelope-o fa-3x fa-rotate-180"></i>
4<i class="fa fa-envelope-o fa-3x fa-rotate-270"></i>

عددی که در انتهای دستور می‌بینید، زاویه‌ی دلخواه را نشان می‌دهد که محدود به ۹۰، ۱۸۰ و ۲۷۰ درجه است.

ّicon font

از کلاس fa-stack می‌توان برای ترکیب دو آيکون به شکل زیر استفاده کرد.

1<span class="fa-stack fa-lg">
2  <i class="fa fa-square-o fa-stack-2x"></i>
3  <i class="fa fa-eyedropper fa-stack-1x"></i>
4</span>
5<span class="fa-stack fa-lg">
6  <i class="fa fa-square-o fa-stack-2x"></i>
7  <i class="fa fa-bell fa-stack-1x"></i>
8</span>
9<span class="fa-stack fa-lg">
10  <i class="fa fa-square-o fa-stack-2x"></i>
11  <i class="fa fa-cutlery fa-stack-1x"></i>
12</span>
13<span class="fa-stack fa-lg">
14  <i class="fa fa-square-o fa-stack-2x"></i>
15  <i class="fa fa-glass fa-stack-1x"></i>
16</span>

نتیجه به شکل زیر خواهد بود:

ّicon font

هنگامی که کار با این شیوه را فراگرفتید، گزینه‌های ترکیبی بی‌شماری پیش رو خواهید داشت.

CSSهای مرسوم

به دلیل این‌که آیکون‌فونت‌ها در واقع نوعی فونت هستند، می‌توانید شکلشان را با CSS مانند دیگر ویژگی‌ها تغییر دهید. با کمی کمک گرفتن از CSS3، آیکونی به شکل زیر ایجاد می‌شود.

ّicon font

دستور مرتبط به آیکون بالا چنین است:

1<i class="fa fa-motorcycle fa-5x bike"></i>

به علاوه دستور CSS مربوطه نیز به شکل زیر است.

1@keyframes move {
2  from { margin-left: 0; }
3  to { margin-left: 400px; }
4}
5
6.bike {
7  animation-name: move;
8  animation-duration: 4s;
9}

گرچه این کد بسیار ساده است، تاثیر بسزایی در طراحی زیبا و پویا دارد. به آیکون‌های زیر نگاه بیندازید.

ّicon font

البته این دستور کمی از نظر اندازه‌ی زیاد فایل در وب مشکل دارد. کد HTML به این شکل خواهد بود:

1<i class="fa fa-user-circle person fa-5x" id="p1"></i>
2<i class="fa fa-user-circle person fa-5x" id="p2"></i>
3<i class="fa fa-user-circle person fa-5x" id="p3"></i>
4<i class="fa fa-user-circle person fa-5x" id="p4"></i>

و کد CSS:

1@keyframes fade {
2  from { opacity: 0; }
3  to { opacity: 1; }
4}
5
6.person {
7  opacity: 0;
8  animation-name: fade;
9}
10
11#p1 {
12  color: red;
13  animation-duration: 2s;
14}
15#p2 {
16  color: orange;
17  animation-duration: 4s;
18}
19#p3 {
20  color: green;
21  animation-duration: 6s;
22}
23#p4 {
24  animation-duration: 8s;
25}

مانند مثال قبلی، این کد هم از انیمیشن CSS3 بهره می‌گیرد. انیمیشن مربوطه با نام fade ایجاد می‌گردد. سپس آیکون‌هایی که می‌بینید با تغییر زمان‌بندی نمایش داده می‌شوند. به صورت بالقوه به شکل شگفت‌انگیزی می‌توان از این روش برای ایجاد آیکون‌های جذاب استفاده کرد.

مطالبی از این دست را می‌توانید در لینک‌های زیر دنبال کنید.