ورود به سایت

ثبت نام در سایت

Registration confirmation will be e-mailed to you.

فراموشی رمز

1 + 11 =

بستن
بستن

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

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

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

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

آیکون چیست؟

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

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

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

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

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

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

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

مطالب مرتبط


گام 1 - دانلود فونت آیکون

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

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

 

گام 2 - نصب فونت آیکون

نصب فونت آیکون

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

blank

نحوه استفاده فونت آیکون برای طراحی

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

blank

گام 3 - فونت آیکون برای کدنویسی

انقال فایلهای داخل پوشه css

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

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

پیوند کردن فایل های css

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

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

blank

انتقال پوشه fonts

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

 

پیوند کردن فایل های پوشه fonts

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

نحوه استفاده فونت آیکون ای فونتیم در سند html

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

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

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

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

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

اطلاعات مطلب

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بهترین علوم و دانش برای شما گردآوری میشه

آخرین های آیا میدانید

از همه جا براتون مطلب داریم لطفا کلیک کنید

مطالب برگزیده

موضوعات مهم سایت

مطالب محبوب