آقای Wenting Zhang، طراح Adobe یک وب اپلیکیشن جذاب برای تولید آیکون های CSS توسعه داده است. نام این ابزار “CSS Icon” میباشد و میتواند یکی از بهترین و جالب ترین تولیدکنندگان آیکون (icon generator) برای توسعه دهندگان Front-End باشد.

این پروژه کاملا رایگان و اوپن سورس در GitHub میباشد. بنابراین شما آزاد هستید آن را دانلود کنید و بدون محدودیت کدهایش بررسی کنید.

پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۹۹ هزار تومان

این آیکون ها هیچ CSS dependency ندارند و به مرورگر خاصی برای نمایش آنها نیاز ندارید. در اولین نگاه، به نظر میرسد آیکون ها بصورت SVG ساخته شده اند اما آنها در حقیقت فقط div هستند.

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

میتوانید از میان آیکون هایی با خطوط نازک (thin line icons) یا آیکون هایی با خطوط تو پر (dark filled icons) انتخاب کنید. هر دوی آنها ویژگی های CSS مشابهی دارند و شما حتی میتوانید با کلیک روی هر یک از آیکون ها در لیست، مشاهده کنید که آنها دقیقا چه چیزی هستند. با کلیک روی آیکون ها، یک ساید بار کشویی شامل کدهای HTML و CSS به همراه تصویر بزرگ شده از آیکونی که انتخاب کردید، مشاهده خواهید کرد.

اگر به گوشه بالا-سمت راست فیلد های کد نگاه کنید، یک آیکون copy خواهید دید. روی آن کلیک کنید تا کدهای آن فیلد بطور خودکار در clipboard شما کپی شود. البته همان آیکون copy هم بوسیله همین icon generator ساخته شده است.

برای تغییر رنگ هرکدام از آیکون ها، کافیه ویژگیcolor را در کلاس اصلی آیکون، مقدار دهی کنید. از آنجایی که این آیکون ها بسیار ساده هستند، ممکن است برای هر وبسایتی کار نکنند. اما به هر حال یک جایگزین بسیار جذاب برای تصاویر یا سایر آیکون فونت ها است و کاملا رایگان و اوپن سورس میباشد.

پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۹۹ هزار تومان

برای مشاهده مثال های بیشتر و همچنین برای copy/edit سورس آنها، از صفحه اصلی CSS Icon بازدید کنید. همچنین اگر بخواهید با سورس کد آیکون ها در مرورگرتان بازی کنید، میتوانید هر کدام از آیکون ها را بصورت جداگانه در CodePen تست کنید.