آموزش سالیدیتی
مجموعه آیکون های زیبا برای طراحی سایت و برنامه نویسی
فروردین
مجموعه آیکون های زیبا برای طراحی سایت و برنامه نویسی ، اخبار امروزه آیکون‌ها همه جا هستند؛ برخی از آن‌ها آنقدر قوی و جهانی شدند که ما با دیدن آن‌ها سریع هدف از استفاده‌ی آن‌ها را تشخیص می‌دهیم.
مجموعه آیکون های زیبا برای طراحی سایت و برنامه نویسی
Font Awesome
Font Awesome معروف‌ترین و پرکاربردترین مجموعه آیکون وب هست. این مجموعه تعداد زیادی از آیکون‌ها را در اختیار شما قرار داده و در بیشتر مرورگرها پشتیبانی می‌شود. Font Awesome از قوانین رابط کاربری و تجربه‌ی کاربری به خوبی استفاده کرده و کاربران زیادی با آن ارتباط برقرار می‌کنند.
Feather Icons
Feather Icons یکی از معروف‌ترین مجموعه آیکون‌های رایگان در سطح وب است. همه‌ی آیکون‌ها در سایز ۲۴ در ۲۴ ساخته شده‌اند و استایل گرد شده شبیه به هم دارند که به آن‌ها ظاهر یکپارچه و یک دستی را می‌دهد. این آیکون برای فریم ورک‌های مختلف مانند React، Vue، Angular، Linea پیاده سازی شده است و می‌توانید از آن‌ها استفاده کنید. فرمت این آیکون‌ها SVG هست و ۲۴۰ آیکون در این مجموعه قرار دارد.
Linea
برای دانلود رایگان آیکون PNG و SVG می‌توانید به مجموعه‌ی Linea مراجعه کنید. تعداد آیکون‌های موجود در آن بیش از ۷۳۰ مورد هست. استایل این آیکون‌ها بسیار زیبا و به صورت خطی هستند. همه‌ی آیکون‌ها در دسته بندی‌های مشخصی از قبیل ساده، موسیقی، تجاری، نرم افزار و … قرار داده شده‌اند.
Octicons
Octicons مجموعه‌ی آیکون‌های زیبای ساخته شده به وسیله Github است. در اصل آیکون‌های مربوط به Github و برنامه نویسی مثل پایگاه داده و عملیات‌های مختلف Git و … در این مجموعه آیکون قرار داده شده‌اند. فرمت این آیکون‌ها SVG می‌باشد و بیش از ۱۷۰ آیکون در این مجموعه قرار دارد.
Icomoon.io
در سایت Icomoon.io آیکون‌های زیادی وجود دارد. روند در این سایت کمی متفاوت است. ابتدا باید آیکون‌های موردنظر را با کلیک کردن انتخاب کرده و سپس در قسمت پایین روی گزینه‌های موجود مانند Font کلیک کنید تا به صفحه‌ی بعدی منتقل شوید. در این صفحه اطلاعاتی راجع به استفاده از آن آیکون به شما داده می‌شود. برای دریافت آیکون‌های انتخابی کافی است بر روی Download کلیک کنید. با این کار یک فایل zip دانلود شده که حاوی دمو نیز هست و تنها کافی است که کدها را به برنامه یا وبسایت خود اضافه کنید.
Material Icons
آیکون فونت Material Icons مجموعه‌ی رسمی و توصیه شده‌ی گوگل است که در Google material design از آن استفاده می‌شود. این مجموعه بیش از ۹۰۰ آیکون را در خود جا داده است که همه در استایل طراحی متریال هستند و می‌توانید به صورت رایگان از آن‌ها استفاده کنید.
Icono
این مجموعه شامل تعدادی آیکون ساخته شده با CSS می‌باشد. برای استفاده از این آیکون‌ها شما باید کدهای CSS را در محل موردنظر خود قرار داده و کلاس آن را به المان HTML نسبت دهید. بیش از ۱۳۰ آیکون در مجموعه Icono گنجانده شده است.
CSS ICON
مجموعه آیکون CSS ICON نیز با استفاده از CSS ساخته شده است. نحوه‌ی استفاده از این مورد نیز شبیه به مجموعه‌ی قبلی است و به راحتی می‌توانید کدهای مربوط به آیکون مورد نظر را در سایت خود قرار دهید.
interface-icons
مجموعه‌ای متشکل از ۱۰۰ آیکون با کیفیت و فلت (flat) که به صورت رایگان قابل استفاده است. این آیکون‌ها در دو فرمت SVG و PNG قرار داده شده‌اند.
Lulu-Icon
این مجموعه شامل ۵۰ عدد آیکون رنگی و برداری است که به صورت رایگان برای دانلود و استفاده در دسترس کاربران قرار گرفته است. آیکون‌های Lulu-Icon در ۳ فرمت AI و EPS و PNG وجود دارند.
Glyph
در بخش‌های قبلی مجموعه‌هایی با فرمت SVG را معرفی کردیم. اگر از تصاویر SVG استفاده کنید، هر چقدر که صفحه را zoom کنید، کیفیت آن تغییری نمی‌کند؛ چراکه تصاویر SVG وکتور و یا به اصطلاح برداری هستند. در Glyph نیز آیکون‌های SVG با کیفیت برای سایت‌های مدرن ساخته شده است. شما می‌توانید این آیکون‌ها را سفارشی کرده و یا فقط از یکی از آن‌ها در سایت خود استفاده کنید و بقیه‌ی موارد را Load نکنید. ۸۰۰ آیکون در این مجموعه قرار دارد.
SVGIcons
با استفاده از این ابزار می‌توانید آیکون‌های زیبایی را به صورت SVG در سایت خود قرار دهید. با این روش، نیازی نیست که به سرور درخواست ( Request ) فرستاده شود و همه‌ی آیکون‌ها را به صورت کدهای SVG در سند خود قرار می‌دهیم.
برای استفاده از این مجموعه آیکون‌های زیبا برای طراحی سایت، ابتدا باید به سایت SVGIcons رفته و فایل‌های مورد نظر را دانلود کنید. سپس یک فایل با نام index.html بسازید و کدهای زیر را درون آن قرار دهید:
تا اینجا فایل موردنظر را وارد کردیم. در ابتدا باید فایل svgicons.css را در قسمت head اضافه کنید، به صورت زیر:
اگر این فایل را باز کنید می‌توانید کدهای زیر را مشاهده کنید:
می بینید که برای کلاس svg-icon کد زیر را قرار دادیم :
می‌توانید عرض و ارتفاع آیکون‌ها و یا رنگ آن‌ها را ( برای مثال در زمان هاور ) تغییر دهید. حالا باید به سایت اصلی رفته و آیکون مورد نظر خود را پیدا کنید:
بعد از کلیک روی آیکون این پنجره باز می‌شود و می‌توانید کدهای مورد نظر را کپی کرده و در سایت یا برنامه‌ی خود قرار دهید.
کدهای بالا به صورت زیر است:
در نهایت بعد از قرار دادن کدها، فایل به صورت زیر خواهد بود:
Geomicons
استفاده از این مجموعه آیکون به صورت رایگان می‌باشد. همان‌طور که در بخش قبل گفتیم آیکون‌های SVG به دلیل کیفیت بالایی که دارند و تسریع در لودشدن سایت یا برنامه، بسیار کاربردی هستند. برای استفاده ابتدا به صفحه‌ی این مجموعه در سایت Github رفته و فایل‌های مورد نظر را دانلود کنید. در این مطلب ما به geomicons.min.js نیاز داریم. فایل را به مشابه بخش قبلی وارد کرده و سپس به المانی که می‌خواهید آیکون داشته باشد،کلاس
دلخواه js-geomicon را نسبت دهید. برای مثال:
Ionicons
آیکون فونت Ionicons ظاهر بسیار زیبا و خوبی داشته و تیم پشتیبان آن تیم Ionic Framework هست. در این آیکون فونت، یک مجموعه آیکون‌های زیبا برای طراحی سایت با بیش از ۲۶۰ آیکون در اختیار شما قرار می‌گیرد. برای استفاده از این مجموعه به صفحه‌ی مربوط به این آیکون فونت در سایت Github رفته و فایل‌های موردنظر را دانلود کنید. در این مطلب ما به ionicons.min.css و فونت‌های زیر نیاز داریم:
- ionicons.eot
- ionicons.svg
- ionicons.ttf
- ionicons.woff
سایر مراحل مشابه با بخش‌های قبل است و باید فایل index ساخته و کدهای مورد نظر را وارد کنید و آیکون‌های مورد نیاز را نسبت دهید.
Html Icons
افراد بسیاری هستند که تمایل دارند تصویر یا آیکون فونتی را به کار نبرند و فقط از کد Hex در HTML استفاده کنند. HTML Iconها با این هدف به وجود آمده‌اند. همچنین استفاده از HTML Iconها در ویرایشگرها بسیار کاربرد دارد. شما می‌توانید با مراجعه به این لینک در سایت W3Schools کد و تصویر آیکون موردنظر خود را پیدا کرده و به عنوان آیکون برنامه یا آیکون وب سایت استفاده کنید. برای تغییر مجموعه‌ی آیکون نیز می‌توانید از نوار کناری سمت چپ سایت کمک بگیرید. برای مثال کد ☁ مربوط به آیکون ابر یا Cloud می‌باشد.
Animocons
کد HTML:
کد CSS:
کد جاوا اسکریپت:
Liveicons
این پلاگین این امکان را به شما می‌دهد تا به جای استفاده از آیکون‌های ثابت و بی‌روح، از آیکون‌های متحرک و زنده استفاده کنید. برخلاف تصور عموم، این مجموعه آیکون یک تصویر gif و مواردی با این فرمت نیست؛ بلکه خود این پلاگین از پلاگین دیگری به اسم raphael.js برای خلق آیکون‌ها استفاده می‌کند. برای استفاده از این پلاگین حتما بخش اسناد و راهنمای استفاده از آن را در خود سایت Liveicons مطالعه کنید.
جمع‌بندی:
هرگونه سوال و مشکلی نسبت به آموزش های داده شده داشتید با پشتیبانی سایت مطرح کنید.تیم ری بیز Reybiz بصورت ۲۴ ساعته جوابگوی سوالات شما است.
ممکن است به این مطالب نیز علاقه‌مند باشید
| # | ارز دیجیتال | قیمت | تغییرات | 24 ساعت اخیر |
|---|
