فونت آیکن یا Font Icon یک فونت مخصوص طراحان وب است که به شما اجازه می دهد با معرفی فونت به قالب سایت و همچنین استفاده از تکه کدهای کوچک، آیکن های مختلفی را در سایت استفاده کنید. اگر به همین انجمن بی تاک هم دقت کنید خیلی از بخش های سایت آیکن ها و نمادهای کوچکی بکار برده ایم که علاوه بر بهبود و زیباسازی رابط کاربری، باعث یافتن بهتر و سریع تر کلیدها و گزینه ها برای کاربران می شود. در چند سال پیش شاید اکثر طراحان سایت و قالب، برای استفاده از آیکن های کوچک مجبور بودند تصویرهایی را بعنوان آیکن استفاده کنند که علاوه بر سخت بودن استفاده تصاویر و تراز کردن آنها با متن های سایت، باعث سنگین شدن حجم سایت و مصرف دیوانه وار پهنای باند سرور می شد. اما خوشبختانه با ارائه فونت های مخصوص آیکن ها دیگر نیازی به استفاده از تعداد زیادی تصویر در سایت نیست و می توانیم به راحتی این آیکن ها را در سایت اضافه کنیم.
اکثر قالب ها و افزونه ها و اسکریپت های مدرن از فونت آیکن ها پشتیبانی می کنند. تنوع فونت آیکن ها باعث شده هر طراح از یک فونت مخصوص و دلخواه خود استفاده کنید. معروف ترین فونت آیکن های حال حاضر به این ترتیب هستند:
فونت Ionicons
این فونت رایگان است و شما می توانید با مراجعه به سایت رسمی این فونت، آن را دانلود کنید. این فونت حدود 440 آیکن را در وزن های مختلف به شما ارائه می کند.
فونت Font Awesome
این فونت بسیار بزرگ و جامع است اما برای داشتن مجموعه ای کامل و بزرگ، شما باید نسخه پرمیوم و غیررایگان آن را خریداری کنید. البته نسخه نال شده ای از آن هم در دسترس است. اما همچنین این فونت یک نسخه رایگان دارد که فونت های بسیاری را در خود جای داده است. سایت بی تاک از نسخه رایگان این فونت استفاده می کند و بیشتر موضوعات و آیکن های موردنظر ما در نسخه رایگان این فونت در دسترس است. با مراجعه به سایت اصلی می توانید نسخه رایگان آن را دریافت کنید. این فونت در نسخه های مختلفی مانند 4 و 5 و 6 و … عرضه شده که هر کدام از این نسخه ها به دو بخش غیررایگان و رایگان تقسیم می شوند.
فونت Elegant Icon Font
این فونت توسط تیم طراح Elegant منتشر شده که دارای نسخه رایگان و پرمیوم می باشد اما نسخه رایگان آن کامل و در اندازه Font Awesome است و تنوع بسیار زیادی دارد. می توانید با مراجعه به لینک سایت رسمی بالا، از لینک دانلود داخل این سایت استفاده کنید.
سایر فونت ها
تعداد زیاد دیگری فونت آیکن وجود دارد که در اینجا به صورت لیست به شما معرفی می کنیم که در صورت تمایل می توانید با جستجو در گوگل آنها را بررسی کنید:
1. Ionicons (441 Icons)
2. Shock Icon Font (1121 Icons)
3. Dripicons (95 Icons)
4. Entypo (250 Icons)
5. Sosa (160 Icons)
6. Foundation Icons (96 Icons)
7. Typicons (308 Icons)
8. The Elegant Icon Font (310 Icons)
9. Map Icons (175 Icons)
10. Ligature Symbols (250 Icons)
11. Heydings Icons (60 Icons)
12. Fontawesome (369 Icons)
13. Signify (38 Icons)
14. PulsarJS (73 Icons)
نحوه اضافه کردن فونت آیکن به سایت
فونت آیکن های مخصوص وب سایت را برای استفاده باید داخل پوشه قالبتان یا بطور کلی در فایل منیجر سایتتان آپلود کنید تا فایل فونت ها از طریق آدرس سایتتان در دسترس باشند. زمانی که پکیج فونت آیکن را دانلود می کنید، داخل فایل فشرده آن یک فایل CSS و پوشه مربوط به فونت ها وجود دارد.
داخل پوشه قالبتان یک پوشه جدید به نام fonts یا نام دلخواه دیگر ایجاد کنید و محتویات پکیج فونت آیکن دانلود شده را داخل این پوشه آپلود کنید. اگر قصد دارید نام پوشه های مربوط به فونت را تغییر دهید یا مسیر آن را دستکاری کنید، حتما باید آدرس های مربوط به فایل فونت را داخل فایل CSS اصلاح کنید در غیر اینصورت فایل فونت ها با خطای 404 مواجه خواهند شد و داخل سایت اجرا نخواهند شد.
بطور مثال، نسخه رایگان Font Awesome را اگر دریافت کنید پکیج آن به این صورت خواهد بود:
پوشه fontawesome-free-6.1.1-web را در مکانی از کامپیوتر شخصی خود Extract کنید. اکنون محتوای داخل آن به این صورت است:
محتوای همین تصویر را باید با فرمت ZIP فشرده کنید.
داخل پوشه قالبتان یا پوشه public_html فایل منیجر سایتتان یک پوشه جدید به نام دلخواه برای مثال fonts ایجاد کنید و این فایل فشرده را داخل آن آپلود کنید و سپس فایل فشرده را Extract کرده و فایل فشرده آن را حذف کنید. الان باید تمامی پوشه های اصلی فونت آیکن داخل فایل منیجرتان قرار داشته باشند.
اگر پوشه CSS پکیج فونت آیکن را باز کنید، تعداد زیادی فایل CSS مشاهده می کنید:
هر کدام از این فایل ها برای معرفی دسته فونت های خاصی است. در برخی سایت ها شاید نیاز به اضافه کردن همه فونت ها به سایت نباشد و تنها برخی از آیکن ها نیاز باشند که در تصویر بالا می توانید ببینید که آیکن ها به چندین دسته مختلف تقسیم شده اند. اما اگر بخواهیم فونت آیکن را بطور کامل به سایت معرفی کنیم، تنها به فایل all.min.css نیاز خواهیم داشت. این فایل تمامی آیکن ها را به سایت معرفی خواهد کرد و می توانید آیکن های متنوعی را استفاده کنید.
قدم بعدی معرفی فایل all.min.css به سایت است. برای انجام اینکار، کافیست کد HTML مربوط به معرفی فونت را به سایت اضافه کنیم. اگر قالب وردپرس دارید این کد را در header.php اضافه کنید یا اگر قالب HTML دارید این کد را قبل از تگ </head> سورس قالبتان اضافه کنید:
<link rel="stylesheet" href="https://betalk.ir/fonts/all.min.css">
آدرس دقیق این فایل در سایت خودتان را جایگزین آدرس کد بالا کنید به گونه ای که با باز کردن آن آدرس در مرورگر، محتوای فایل استایل موردنظرمان داخل مرورگر باز شود. در اینصورت می توانیم مطمئن شویم که آدرس دهی ما درست و کامل است. در صورتی که با باز کردن آدرس مستقیم فایل خطای 404 دریافت کردید، باید نسبت به اصلاح آدرس مستقیم فایل اطمینان حاصل کنید در غیراینصورت فونت در سایت اجرا نخواهد شد.
یا اگر اسکریپت اختصاصی دارید و نمی توانید کد HTML به آن اضافه کنید می توانید بجای کد بالا، این کد را در یکی از فایل های CSS فعلی اسکریپت خودتان اضافه کنید. کد زیر را در ابتدای یکی از فایل های CSS که داخل سایت مطمئن هستید اجرا می شود قرار دهید:
@import url("https://betalk.ir/fonts/all.min.css");
تا اینجای کار توانستیم فونت را به سایت معرفی کنیم. اکنون باید کدهایی که آیکن ها را به سایت اضافه می کند را استفاده کنیم.
برای استفاده از یک آیکن، شما باید به صفحه رسمی آن فونت مراجعه کنید. برخی از فونت آیکن ها کدهای مخصوصی برای نمایش آیکن دارند. برای مثال در Font Awesome کد مربوط به اضافه کردن یک آیکن به بخشی از قالب، به این صورت است:
<i class="fas fa-cog"></i>
- این کد با تگ
i می باشد که بیانگر icon است و نباید این قسمت را تغییر دهید. ممکن است فونت آیکن های دیگر، بجای این کد، از تگ span نیز استفاده کنند بنابراین کد آیکن همان فونت را از سایت طراح آن فونت پیدا کنید.
- در قسمت کلس ها، عبارت fas شناسه وزن آیکن است. وزن های مختلفی مانند
far و fas و fab و fa قابل استفاده هستند. هر کدام از این عبارت ها آیکن را Bold یا Thin (درشت و نازک) می کند. بنابراین اگر مطمئن نیستید باید وزن های مختلف را امتحان کنید تا وزن موردنظرتان را پیدا کنید. اما بطور پیش فرض وزن پیشنهادی در سایت طراح وجود دارد.
- در همین بخش کلس، عبارت
fa-cog معرف نام آیکن است. شما باید از لیست آیکن ها در سایت طراح جستجو کنید و نام آیکن موردنظرتان را پیدا کرده و بجای این کلس وارد کنید تا آیکن های متنوعی را استفاده کنید.
برای مشاهده لیست آیکن ها حتما باید به سایت طراح مراجعه کنید. برای فونت Font Awesome می توانید با مراجعه به این لینک، لیستی از آیکن ها را مشاهده کنید. اگر آیکن ها نمایش داده نمی شود باید پروکسی خود را روشن کنید تا لیست آیکن ها نمایش داده شود.
با ورود به لینک مذکور، از بخش جستجو، نام آیکن های موردنظرتان را به انگلیسی وارد کنید و روی آیکن پیدا شده کلیک کنید. در صفحه باز شده کد کلس مربوط به آن آیکن را پیدا کنید و در کد بالا جایگزین کنید.
در صورتی که سوال یا مشکلی در این زمینه دارید در پاسخ به همین تاپیک بپرسید. 🙋♂️
