بهترین فونت آیکن ها و نحوه استفاده از آنها (Icon Fonts)

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

اما فونت آیکون دقیقا چیست؟ و چگونه از آنها استفاده می کنید؟ در اینجا راهنمای همه چیزهایی است که باید در مورد فونت ایکن ها و نمادها را بدانید، برایش شما شرح میدهم.

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

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

نکته قشنگ ماجرا دقیقا این جاست که همه این کارها با CSS انجام می شود، بنابراین لازم نیست برای هر نمونه جدید از یک نماد در طراحی، تصاویر منحصر به فردی ایجاد کنید. (این برای سبک نگه داشتن وب سایت و کد شما عالی است که خود این موضوع برای سئو وبسایت شما حائز اهمیت است) .

مزایا و معایب استفاده از فونت آیکون ها

پس با توجه به مواردی که در بالا ذکر شد، مزایای قابل توجهی برای استفاده از فونت های نماد به جای تصاویر بیت مپ در پروژه های شما وجود دارند از جمله:

• می توانید هر افکت CSS را روی آنها اعمال کنید. همچنین تغییر رنگ آنها یا اضافه کردن سایه به شکل فونت ایکون ساده است. هم چنین میتوانید فونت ایکون را مانند هر فونت دیگری، به اندازه دلخواه بزرگ یا کوچک کنید.
• از فونت آیکون ها به تنهایی به عنوان عناصر هنری یا حتی پراکنده در سایر فیلدهای متنی استفاده کنید.
• از آنجایی که آنها داراری گرافیک برداری هستند، مقیاس پذیر هستند. این بدان معناست که می‌توانید بدون از دست دادن کیفیت، آنها را کم یا زیاد کنید.
• شما به جای چندین درخواست HTTP که ممکن است تصاویر بیت مپ به آن نیاز داشته باشند، یک یا چند درخواست HTTP برای بارگیری آنها ارسال می کنید.
• آنها به دلیل اندازه کوچک خود سریع بارگیری می شوند.
• آنها در همه مرورگرها (حتی به IE6) پشتیبانی می شوند.
• فونت‌های آیکون راه بسیار ساده‌ای برای راه‌حل برای برخورد با طراحی واکنش‌گرا برای پروژه های ما هستند.

بنابراین، آیا فونت ایکون برای همه موارد مناسب هستند؟ تصمیم با شماست! این فونت ها یک راه عالی برای بهبود طراحی یک پروژه هستند اما محدودیت هایی نیز دارند.به عنوان مثال:

• اگر می خواهید به جای یک نماد ساده، یک تصویر پیچیده را در پروژه خود نشان دهید، فونت آیکون بهترین راه حل نیست.
• آنها همچنین معمولاً به یک رنگ محدود می شوند، مگر اینکه از برخی ترفندهای CSS استفاده کنید.
• علاوه بر این، فونت‌های آیکون بر اساس شبکه‌های خاصی طراحی می‌شوند، به عنوان مثال 16px16، 32×32، 48×48، و غیره. اگر به دلایلی سیستم شبکه را به 25×25 تغییر دهید، احتمالاً نتایج واضحی دریافت نخواهید کرد (CSS می تواند کمک کند).
• مسئله دیگر در مورد دسترسی است. استفاده از تمام اشکال رایگان نبوده و برای برخی از آنها نیاز به پرداخت هزینه های متفاوتی است.
• بسیار ساده است که یک متن با اندازه های مختلف برای اندازه های دید متفاوت ارائه شود، اما تغییر اندازه تصاویر بسیار دشوارتر است.

محبوب ترین و شناخته شده ترین کتابخانه فونت آیکون به شرح زیر می باشند:

• Font Awesome
• IcoMoon
• Entypo
• Flaticon
• Icofont
• Fontello

این فونت آیکون ها با تمام ابزارهای محبوب، از جمله Web Fonts + CSS، SVG + JS، Sketch، Adobe Apps، Vue.js، Angular، React و Ember کار می کند و شما می توانید از این فونت ها در سایت خود از طریق اعلامیه CSS @font-face استفاده کنید.

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