فوتیم

آموزش استفاده از فونت آیکون در طراحی و کد نویسی

فونتیم برای طراحی

گام اول ( دانلود فونت آیکون فونتیم )

برای دانلود فونت آیکون بر روی دانلود کلیک کنید.

دانلود فونتیم

گام دوم ( نصب فونت آیکون فونتیم )

بعد از دانلود فونتیم از پوشه fonts فایل fontim.ttf را پیدا کرده و بر روی آن راست کلیک کرده و فونت را نصب میکنیم.

گام سوم ( نحوه استفاده فونت آیکون برای طراحی )

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

فونتیم برای کدنویسی

گام اول ( انقال فایلهای داخل پوشه css )

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

در فایل فونت آیکونی که از فونتیم دانلود کردید یک پوشه با نام css وجود دارد که فایلهای css فونت آیکون فونتیم داخل آن پوشه هست.تمامی فایلهای css داخل پوشه را به مسیری که فایل های css پروژه هست انتقال دهید.

گام دوم ( پیوند کردن فایل های css )

بعد از انتقال فایلهای css سند html را باز کرده و در داخل head با استفادده از تگ link فایلهای css را به سند html پیوند دهید.

نمونه ای از پیوند کردن فایل های css به سند html

گام سوم ( انتقال پوشه fonts )

پوشه fonts را به پروژه انتقال دهید.

گام چهارم ( پیوند کردن فایل های پوشه fonts )

فایل fontim.mins.css را باز کرده ولینک ها را برای پیوند کردن فایل های داخل پوشه fonts ویرایش کنین.

گام پنجم ( نحوه استفاده فونت آیکون ای فونتیم در سند html )

بعد از اینکه تمامی فایل ها را به درستی به سند html و فایل fontim.min.css پیوند داید به صفحه اصلی فونتیم رفته و آیکون خود را انتخاب کنین.بعد از انتخاب صفحه آیکون انتخاب شده را مشاهده خواهید کرد.

در این صفحه امکاناتی همچون تغییر مقیاس ، انیمیشن ، چرخش و اصلاح کننده برای شما در نظر گرفته شده است که میتوانید تغییرات در آیکون انجام دهید.

پایین تغییرات یک کادری هست با عنوان html که خروجی با تگ span به شما میدهد.میتوانید آن را کپی کرده و در سند html خود استفاده کنین.

اگر آیکون را برای تگ هایی همچون تگ a و تگ i میخواهید استفاده کنید از خروجی کادر class استفاده کنید