فرادرسآیکونفونت چیست و چه کاربردی دارد؟ — آموزش گام به گام
حتما در مورد آیکون و فونت تا به حال شنیده و با آنها کار کرده‌اید. اما «آیکون‌فونت» (Icon Font) چیست؟ در این نوشته در مورد آیکون‌فونت صحبت خواهیم کرد. به علاوه کاربرد آیکون‌فونت برای پویا و زیبا کردن وب‌سایت را توضیح می‌دهیم. بیایید شروع کنیم.
آیکون‌فونت چیست؟
آیکون‌فونت دقیقا مشابه فونت‌های معمولی، شکل و حس یک متن را به بیننده نشان می‌دهد. با این وجود آیکون‌فونت‌ها از حروف و اعداد ساخته نمی‌شوند. سمبل‌ها و آیکون‌ها خشت اصلی آنها را تشکیل می‌دهند. شاید این سوال برای شما پیش بیاید وقتی نتوانیم از حروف برای نوشتن استفاده کنیم، آیکون‌فونت چه کاربردی دارد؟
آیکون‌فونت را برای شکل دادن به وب‌سایت، مورد استفاده قرار می‌دهند. به دلیل ماهیت «وکتور»ی (vector)، آنها را می‌توان با زبان CSS از نظر اندازه و شکل تغییر یا حرکت داد. این روش مزایای زیادی نسبت به راه سنتی استفاده از تصاویر دارد.
ظاهر و حس یک آیکون را تنها با چند خط کد می‌توان تغییر داد. همچنین نیازی به کار با ابزارهای ویرایش عکس مانند فتوشاپ یا بارگذاری فایل‌های جدید نیست. تنها باید کد بنویسید.
اولین قدم ایجاد آیکون‌فونت
اگرچه می‌توان برای این راهکار از مجموعه فونت‌های مختلفی استفاده کرد، اما در ادامه آموزش را با «Font Awesome» پیش خواهیم برد.
برای آغاز کار به کد 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چنین دستوری، آيکونی به شکل زیر نمایش می‌دهد.
دیدید که کار چقدر ساده است. حال بهتر است کمی جزئی‌تر بحث کنیم. دو کلاس برای استفاده از Font Awesome مورد نیاز است. اولین کلاس معروف به fa است که فونت مذبور را نمایندگی می‌کند. دومین کلاس آیکون مورد نظر را که می‌تواند هر چیزی مانند هواپیما، تصویر شخص یا کارت اعتباری باشد، تعیین می‌نماید.
در بالا ما آیکونی با عنوان cog را فراخوانی کردیم و به صورت پیش‌فرض در ابتدای نامش عبارت fa نیز قرار گرفته است؛ در اصل اسم این آیکون در هنگام فراخوانی به صورت fa-cog درج می‌شود. در وب‌سایت مربوطه می‌توانید فهرستی از آیکون‌های Font Awesome را ببینید. سعی کنید آیکون‌های دیگر را نیز امتحان کنید.
دستورات پیچیده‌تر آیکون‌فونت
حال که با اساس کار آشنا شدید، بهتر است کمی ترفندهای پیشرفته‌تر را بیاموزید.
اگر مایل نیستید کد 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>
کلاس کاربردی دیگر fa-spin است. از این کلاس می‌توان برای چرخش آیکون استفاده کرد. با ترکیب این کلاس با کد تغییر اندازه، امکان ایجاد افکت‌های جذاب وجود دارد. کد مذکور به صورت زیر است:
1<i class="fa fa-refresh fa-spin fa-3x"></i>که به شکل زیر درمی‌آید:
همچنین به راحتی می‌توان با کلاس 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>عددی که در انتهای دستور می‌بینید، زاویه‌ی دلخواه را نشان می‌دهد که محدود به ۹۰، ۱۸۰ و ۲۷۰ درجه است.
از کلاس 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>نتیجه به شکل زیر خواهد بود:
هنگامی که کار با این شیوه را فراگرفتید، گزینه‌های ترکیبی بی‌شماری پیش رو خواهید داشت.
CSSهای مرسوم
به دلیل اینکه آیکون‌فونت‌ها در واقع نوعی فونت هستند، می‌توانید شکلشان را با CSS مانند دیگر ویژگی‌ها تغییر دهید. با کمی کمک گرفتن از CSS3، آیکونی به شکل زیر ایجاد می‌شود.
دستور مرتبط به آیکون بالا چنین است:
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}گرچه این کد بسیار ساده است، تاثیر بسزایی در طراحی زیبا و پویا دارد. به آیکون‌های زیر نگاه بیندازید.
سلام خواستم بپرسم برای اینکه ایکن از متن کمی فاصله بگیره باید چکار کنیم؟؟؟