نوشته های محمد نمازی

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

یکی از مشکلات دیگه هم قابلیت تغییر سایز آیکون ها در صفحه نمایش های رتینا و با رزولوشن  بالا هست! اگر طرحی رو به صورت ریسپانسیو کار کرده باشید حتما میدونید که آیکون ها توی نمایشگر های رتینا تار نمایش داده میشن که برای حل این مشکل یا باید از فرمت SVG و یا اینکه از یه تصویر بزرگتر استفاده کنید.

بهترین روش حل این مشکلات استفاده از آیکون فونت ها (Icon fonts) در طرح هاتون هست. شما میتونید با استفاده از سایت ها و ابزارهای مختلف، آیکون های مورد نیاز خودتون رو انتخاب و به صورت وب فونت دریافت کنید و بعد ازشون به راحتی استفاده کنید! اون موقع هست که میتونید ببینید آیکون فونت ها چقدر کارتون رو راحت تر میکنن!

چند تا از برتری های آیکون فونت ها نصب به تصاویر رو براتون مینویسم :

– خیلی راحت میتونید بدون افت کیفیت آیکون ها رو با استفاده از فونت سایز تغییر اندازه بدید.

– به راحتی مثل متن میتونید رنگ آیکون ها رو تغییر بدید.

– امکان استفاده از سایه برای آیکون ها وجود داره.

– توی اکثر مرورگرها حتی IE7 کار میکنه!

– برای حالت های Hover و … نیاز به استفاده از چند تصویر ندارید!

– سایز کمتری نسبت به تعداد زیادی تصویر داره.

توی طرح های فارسی زیاد از این امکان استفاده نشده ولی پیشنهاد میکنم حتما ازین به بعد از آیکون فونت ها توی کاراتون استفاده کنید 🙂

من خودم از سایتهای icomoon و fontello استفاده میکنم. کافیه با جستجوی توی گوگل سایت های دیگه رو هم پیدا کنید 🙂

موفق باشید.

منبع : محمد رضا محمودی