سلام خدمت همراهان همیشگی لرن سایت

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

در این مقاله ما 9 عدد از بهترین و قابل اعتماد ترین آیکون پک ها رو به شما پیشنهاد میدهیم . این آیکون ها را به سه دسته آیکون فونت‌ها , SVG ها و Css آیکون ها تقسیم‌بندی کردیم . قبل از معرفی این بسته ها به معنی هرکدام از این دسته ها میپردازیم .

آیکون فونت‌ها :

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

SVG آیکون ها :

مخفف Scalable Vector Graphic که یک فرمت گرافیکی مبتنی بر XML است که میتواند در هر مقیاسی تغیر اندازه دهد بدون آنکه از شفافیت تصویر کاسته شود . میتواند از طریق CSS , برچسب Object , برچسب Img و یا مستقیماً در HTML استفاده شود . Svg ها در مرورگر های امروزی پشتیبانی می‌شود اما در نسخه های پایین مرورگر IE و اندروید 2.3 به پایین پشتیبانی نمیشود .

CSS آیکون ها :

بسیار تأثیر گذارند اگر میخواهید از مقدار کمی از آیکون ها استفاده کنید . تمام کاری که باید انجام دهید این است که باید Css آیکون های دلخواه خود را در فایل استایل پروژه جایگذاری نمایید . اما برای استفاده از حجم زیادی از آیکون ها استفاده نمیشود . البته یک مشکلی دیگر هم در این دسته وجود دارد که امکان دارد در مرورگر های متفاوت به شکلی دیگر نمایش داده شوند .

1.Feather Icons :

• دسته : SVG
• تعداد آیکون ها :‌ 240 عدد
• لایسنس : MIT

این بسته یکی از محبوب‌ترین آیکون پک های متن باز است . همه آیکون ها در اندازه 24*24 طراحی شده‌اند و دارای گوشه ی گرد میباشند که به آن‌ها ظاهری یکسان میدهد . و پروژه هایی در گیت هاب برای استفاده این بسته در فریمورک هایی مانند Angular , Vue و React منتشر شده .

2. Linea :

• دسته : Svg , Png , Icon Font
• تعداد آیکون ها : +730 عدد
• لایسنس :‌ CCBY

این بسته , مجموعه عظیمی از آیکون های زیبا و مدرن ارائه میدهند که دارای ظاهری دقیق و یکنواخت میباشند . خوشبختانه تمام آیکون ها به دسته های مختلفی مانند موزیک , فروشگاهی , نرم‌افزار و … تقسیم شده‌اند .

3. Octicons :

• نوع : SVG
• تعداد آیکون ها : +170 عدد
• لایسنس :‌ Github

Octicons مجموعه ایکون مقیاس پذیر Githun هست که از آیکون های SVG دست ساز ساخته شده . این بسته شامل لوگوی خود گیت هاب به صورت آیکون و آیکون های مربوط به برنامه نویسی مثل دیتابیس یا اعمال مربوط به گیت و … میباشد .

4. Glyph :

• دسته :‌ Svg
• تعداد آیکون ها : 800 عدد
• لایسنس : CC BY-SA 4.0

مجموعه آیکونی زیبا و پیکسلی از نوع SVG که برای وبسایت های مدرن طراحی شده . در پروژه گیت هاب شما میتوانید یک اسکریپت Node.js دانلود کنید که شما را قادر میسازد فقط آیکون هایی که نیاز دارید را در پروژه استفاده کنید .

5. Font Awesome :

• دسته : Icon Font
• تعداد آیکون ها : 675 عدد ( در نسخه 5 این بسته 907 آیکون رایگان و 1276 آیکون ویژه ارائه شده )
• لایسنس : Sil OFL 1.1

Font Awesome محبوب‌ترین آیکون فونت در بین طراحان وب میباشد ( بیش از 50 هزار ستاره در گیت هاب کسب کرده ) , این بسته مجموعه بزرگی از آیکون هایی را برای مقیاس پذیری , پشتیبانی جهانی مرورگر ها و دسترسی مناسب برای کاربران ضعیف پیشنهاد میدهد .

6. Ionicons :

• دسته : Icon Font
• تعداد آیکون ها : +260
• لایسنس :‌ MIT

یک آیکون پک بسیار زیبا توسط تیم طراحی فریم ورک Ionic میباشد . که بیش از 260 آیکون زیبا پیشنهاد میدهد , بعضی آن‌ها در سبک فلت ضخیم و بعضی دیگر در سبک مدرن نازک هستند .

7. Material Icons :

• دسته : Icon Font
• تعداد آیکون ها : +900 عدد
• لایسنس :‌ Apache

بسته رسمی برای شیوه طراحی متریال آرائه شده توسط گوگل و تمام آیکون ها در اندروید میباشد . که شامل بیش از 900 آیکون که همه در سبک متریال ساخته شده‌اند و تضمین میکند که وقتی با هم ترکیب می‌شوند همیشه زیبا به نظر می‌آید .

8. Icono :

• دسته : CSS Icons
• تعداد آیکون ها : 130 عدد
• لایسنس :‌MIT

مجموعه‌ای از آیکون های Css میباشد . برای راه اندازی آن‌ها , تمام کاری که باید انجام دهید این است که باید فایل .css را دانلود کنید , یک برچسب یا عنصر خالی (‌بدون محتوا ) در HTML بسازید و کلاس مورد نظر را به آن اختصاص دهید . تمام آیکون ها به شکلی ساخته شده‌اند که فقط یک برچسب HTML برای نمایش آن نیاز دارید .

9. CSS Icon :

• دسته : Css Icons
• تعداد آیکون ها :‌190 عدد
• لایسنس :‌ CC0 v1.0 Universal

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