نویسنده: علی باقری نیا
تاریخ: ۲,آذر,۱۳۹۲
آخرین ویرایش: ۰۳ مرداد ۱۳۹۶
بدون دیدگاه
1628 بازديد

استفاده از آیکون-فونت ها در وردپرس !‌

آیکون فونت چیست ؟ آیکون-فونت ها ،‌ در واقع یک ...

امتیاز دهید :

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
  • یکی از راه های زیباتر جلوه دادن یک سایت ،‌ استفاده از آیکون ها برای هر آیتم است . اگر شما بخواهید برای هر قسمت از سایتتان ،‌یک آیکون طراحی کنید یا در اینترنت دنبال آن بگردید ،‌ سپس تک تک آن را در هاست آپلود کنیدو بعد با css آن را به آیتم موردنظرتان اضافه کنید ،‌ وقت بسیار زیادی از شما تلف میشود . بنا بر این در این نوشته ،‌ یک راه بسیار ساده تر و سریع تر به نام آیکون-فونت ها را با هم بررسی خواهیم کرد !‌

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

    آیکون-فونت ها ،‌ در واقع یک نوع فونت هستند ،‌ مثل تاهوما و یا نسخ !‌ با این تفاوت که به جای هر حرف الفبا ، یک تصویر را در خود ذخیره کرده اند . برای مثال یکی از مشهور ترین فونت-آیکون ها که حتما تا به حال با آن کار کرده اید ،‌ windings است ! فونت-آیکون هایی که در حاضر برای استفاده وجود دارد ،‌ تک رنگ هستند و برای طراحی های مدرن بسیار مناسب هستند !‌

    تصویر

    از مزایای فونت-آیکون نسبت به تصاویر معمولی ،‌ میتوان به بارگذاری سریع تر و راحتی استفاده اشاره کرد . برای مثال در یک تصویر معمولی ،‌ شما برای عوض کردن رنگ آن ،‌باید به نرم افزارهای ویرایش تصویر متوسل شوید ،‌اما در آیکون-فونت ها ،‌به راحتی و با همان دستور معروف font-color سی اس اس ،‌ میتوانید رنگ آیکون ها را تغییر دهید !
    استفاده از آیکون-فونت ها

    اگر تا به این جای این نوشته را خوانده باشید ،‌ حتما دوست دارید از آیکون-فونت ها در سایت خود استفاده کنید . اما چگونه یک آیکون-فونت را در سایت خود داشته باشیم ؟
    نسختین گام ،‌انتخاب یک آیکون-فونت مناسب است  ! خوشبختانه فونتهایی که در وب در دسترس هستند ،‌رایگان هستند و این کار ما را بسیار راحت میکند . در ادامه چند فونت-آیکون مشهور و محبوب را به شما معرفی میکنیم !‌
    Font Awesome

    این فونت ،‌ یکی از محبوب ترین آیکون-فونت های اینترنت محسوب میشود و تا الآن که من دارم این نوشته را مینویسم ،‌ حدود ۳۷۰ آیکون دارد ! این مجموعه مدام در حال آپدیت شدن است هر روز بیشتر میشود !‌ این فونت ،‌ آیکون هایش را دسته بندی های

    • برنامه های وب
    • واحد پول
    • ویرایشگر متن
    • ویدئو پلیر
    • آیکون های تجاری
    • آیکون های دارو و …

    جا داده است . شما میتوانید بنا به نیازتان و موضوع سایتتان ، از یکی از این دسته بندی ها استفاده کنید . از مزایای دیگر این افزونه ،‌هماهنگی آن با اکثر مرورگرها و همچنین دستگاه هاست .
    برای استفاده ی بسیار راحت از این افزونه ،‌ میتوانید افزونه ی Font Awesome  را نصب کنید . این افزونه به شما کمک میکند تا با استفاده از شورت کد ها ،‌آیکون ها را به نوشته ها و برگه هایتان اضافه کنید .
    شما دو راه برای استفاده از آیکون های font-awesome دارید !‌

    • استفاده از شورت کدها : غیر از نصب افزونه ،‌ میتوانید به صورت دستی نیز کد زیر را به محل دلخواه خود اضافه کنید :‌

    [icon name=icon-pencil]

    [icon name=icon-pencil]
    بعد از علامت مساوی ،‌باید نام آیکون موردنظرتان را وارد کنید ، لیست کامل آیکون ها به همراه نام آنها را در اینجاببینید . راه دیگر ،‌ استفاده از کد زیر است :‌

    <i class=”icon-home”></i>

    <i class=”icon-home”></i>
    همچنین شما میتوانید با استفاده از افزونه ی Font Awesome Menus plugin ،‌ آیکون ها را به منوهای سایتتان اضافه کنید .
    تصویر

    برای استفاده از این آیکونها در منوی خود ،‌ کافیست نام آیکون موردنظر به بخش ‘CSS Classes’ هر آیتم از منو اضافه کنید .
    استفاده از فونت-آیکون ها در ابزارک

    افزونه ی دیگری از زیرمجموعه ی font awesome وجود دارد که به شما کمک میکند تا آیکون موردنظرتان را به ابزارک اضافه کنید .

    تصویر
    کار با این افزونه بسیار راحت است ،‌ بعد از نصب و فعالسازی آن ،‌گزینه ای جدید به هر یک از ابزارک های شما اضافه میشود که میتوانید با استفاده از آن ،‌آیکون موردنظرتان را استفاده کنید .

    منبع

  • تازه های وردپرس رو از کانال تلگرام خانه وردپرس دنبال کنید