فونت آیکون و چگونگی استفاده از آن در طراحی سایت |
بستن
اطلاعات بیشتر
- ارسال ها: 60
- تشکرهای دریافت شده: 4
7 سال 6 ماه قبل #394
توسط nooshin88
استفاده از ابزارهای نو در طراحی سایت میتواند باعث سهولت در طراحی و جذابیت بیشتر سایت شما شود. یکی از این ابزارها میتواند فونت آیکون باشد.
یکی از فونت آیکونهای محبوب Font Awesome میباشد که در ادامه با برخی ویژگیها و نحوه استفاده آن آشنا خواهیم شد.
یک فونت، ۵۱۹ آیکون
در یک مجموعه واحد، Font Awesome یک زبان تصویری است که بسیاری از کنشهای وابسته به وب را شامل میشود
بدون نیاز به جاوا اسکریپت
نگرانی کمتر بابت سازگار نبودن بدلیل آنکه نیاز به جاوا اسکریپت ندارد
مقیاسپذیری بینهایت
آیکونها در هر اندازهای زیبا و جذاب خواهند بود.
قابلیت استفاده از CSS
به آسانی میتوانید به آیکونها رنگ، اندازه و هر انچه که با css امکانپذیر است بدهید.
نحوه استفاده
1- ابتدا آخرین ورژن فونت را از سایت Font Awesome دانلود کنید.
2- در <head> کد html خود آدرس زیر را قرار دهید.3- Font Awesome طراحی شده است تا با عناصر درون خطی (inline element) مانند i و span استفاده شود. کافی است نام آیکون را پس از fa- در class بگذاریم.
برای مثال:یامنبع:
طراحی سایت
ستروکیت
در عکس زیر نمونه هایی از آیکونها را میتوانید مشاهده کنید
یکی از فونت آیکونهای محبوب Font Awesome میباشد که در ادامه با برخی ویژگیها و نحوه استفاده آن آشنا خواهیم شد.
یک فونت، ۵۱۹ آیکون
در یک مجموعه واحد، Font Awesome یک زبان تصویری است که بسیاری از کنشهای وابسته به وب را شامل میشود
بدون نیاز به جاوا اسکریپت
نگرانی کمتر بابت سازگار نبودن بدلیل آنکه نیاز به جاوا اسکریپت ندارد
مقیاسپذیری بینهایت
آیکونها در هر اندازهای زیبا و جذاب خواهند بود.
قابلیت استفاده از CSS
به آسانی میتوانید به آیکونها رنگ، اندازه و هر انچه که با css امکانپذیر است بدهید.
نحوه استفاده
1- ابتدا آخرین ورژن فونت را از سایت Font Awesome دانلود کنید.
2- در <head> کد html خود آدرس زیر را قرار دهید.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
برای مثال:
<i class="fa fa-camera-retro"></i> fa-camera-retro
<i class="fa fa-desktop"></i> fa-desktop
در عکس زیر نمونه هایی از آیکونها را میتوانید مشاهده کنید
این کاربران از شما تشکر نموده اند: atmega128
لطفاً ورود یا ايجاد حساب كاربری برای پیوستن به بحث.
مدیران انجمن: developzoom