معرفی سایت فونتیم

Icon حاوی اشکالی است که برای کاربر آشنا بوده و تداعی‌کننده‌ی موجودیتی می‌باشد که ..

اول از هرچیزی آیکون ها را بهتر بشناسیم.

آیکون چیست ؟

Icon حاوی اشکالی است که برای کاربر آشنا بوده و تداعی‌کننده‌ی موجودیتی می‌باشد که برای آن به کار رفته است.

تقریبا تمامی نرم افزارها، فایل‌ها، آیتم‌های موجود در نوارهای ابزار، دستورات موجود در منوها، وبسایت‌ها و … دارای آیکون‌هایی هستند.

که به کاربر در تشخیص و یافتن سریعتر عنصر مربوطه کمک می‌کنند.

فونت آیکون چیست ؟

فونت آیکون مجموعه ای از آیکون ها می باشد که طراح ها یا برنامه نویس ها استفاده میکنند.کار کردن با فونت آیکون ها خیلی راحتر و سریعتر و بهینه تر از آیکون های png یا svg هست.

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

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

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

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

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

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

بعد از دانلود فونتیم از پوشه 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 استفاده کنید

توسط
لینک کوتاه : http://www.dlcode.ir/?p=9621

ممکن است بپسندید

نظر دهید

آدرس ایمیل شما منتشر نمیشود.