شنبه , ۳۱ تیر ۱۳۹۶
خانه » سایت و وبلاگ » آموزش طراحی سایت » استفاده از فونت آیکون بجای آیکون عکس

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

Font_Icon

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

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

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

دیگه حاشیه بسته، مثل همیشه ساده و مختصر و مفید:

این روزا دیگه آیکون وب با فرمت عکس جای خودش رو به  فونت آیکون داده. برای این کار هم دلایل مختلفی داره که از نظر من شامل موارد زیر می شه:

۱- دسترسی به کلی آیکون وب مختلف با لود یک  فونت آیکون

۲- عدم محدودیت انتخاب رنگ برای  فونت آیکون (با یک استایل ساده تغییر رنگ فونت، هر رنگی که بخواهیم به  فونت آیکون مون میدیم.)

۳- تغییر سایز  فونت آیکون بدون محدودیت ( با یک استایل اندازه فونت می تونیم یک  فونت آیکون با سایز دلخواه داشته باشیم.)

۴- با این ویژگی ها کار ساخت فونت آیکون برای قالب های واکنشگرا ( رسپانسیو) خیلی راحت تر میشه.

ساخت آیکون وب :

۱- معرفی سایت طراحی و دانلود  فونت آیکون fontello:

سایت fontello یکی از بهترین و ساده ترین سایت ها برای تهیه  فونت آیکون دلخواه می باشه. بعد از باز کردن سایت از میان آیکن های موجود آیکن های مورد نیاز خود رو انتخاب کنید و بعد از منوی بالا روی Download webfont کلیک کنید. به همین راحتی به همین خوشمزگی :-)

در صورتی که خودتون فونت یا آیکون با فرمت SVG دارید می تونید داخل بخش بالا ( Custom font ) کشیده و اون رو ویرایش کنید!

همچنین از بخش Customize Names می توانید نام  فونت آیکون و از بخش Customize Codes کد  فونت آیکون خود تغییر دهید. پس از دانلود داخل فایل زیپ از طریق فایل demo هم می توانید نام و کد (همراه با شکل آیکون انتخابی) فونت های انتخابی خود رو مشاهده کنید. ( از کد و یا نام  فونت آیکون جهت نمایش  آیکون در طراحی خود استفاده می کنیم. )

۲- معرفی سایت دانلود  فونت آیکون fortawesome:

شما می توانید در این سایت آخرین نسخه پک  فونت آیکون fortawesome رو دانلود کنید که شامل فونت آیکون و فایل استایل فریم وردک می باشه. و با یک فونت به بیش از ۴۰۰ آیکون دسترسی پیدا کنید.

جهت مشاهده کد و نام  فونت آیکون بهمراه شکل آیکون به بخش cheatsheet وبسایت fortawesome مراجعه کنید.

از ویژگی های این فونت آیکون مچ بود و طراحی اختصاصی اون برای بوت استراپ، و عدم استفاده از جاوا اسکریپت می باشه. جهت کنترل و تعیین  فونت آیکون هم از کدهای Css استفاده میشه. ( از کد و یا نام آیکون وب جهت نمایش آیکون وب در طراحی خود استفاده می کنیم. )

۳-معرفی سایت طراحی و دانلود  فونت آیکون glyphter:

در glyphter شما می توانید  فونت آیکون های مورد علاقه خود را از بخش سمت راست انتخاب کنید. سپس بکشیدن بر وری کاراکتر مورد نظر و یک فونت دلخواه برای خود بسازید. همچنین می توانید با عضویت در سایت فونت خودتون رو ذخیره کنید و هر وقت خواستید ویرایش و یا دانلود کنید.

در بالای صفحه اسم  فونت آیکون خودتون رو وارد کنید. و پس از دانلود کد استایل داخل فایل زیپ رو در استایل خود قرار دهید. حال با تنظیم فونت فامیلی و نشوتن کاراکتر آیکون مورد نظر، آن فونت آیکون رو نمایش دهید.

۲ نظر

  1. سلام من یه سوال داشتم. من یه قالب دارم که در اون از fontasome استفاده شده. چطوری میتونم به جای اونها از تصاویر وکتوری استفاده کنم؟؟خواهش میکنم کمکم کنید

    • سلام دوست عزیز
      خوب باید کد نویسی و برنامه نویسی یاد داشته باشی و کلا تغییرات اساسی ایجاد کنی.


از ما حمایت کنید!