1 1 1 1 1 1 1 1 1 1 امتیاز 0.00 (0 رای)

نحوه اضافه کردن آیکون به لینک های منو جوملا

font awesome menu منوبسیاری از قالب های جوملا، از آیکون برای آیتم های منو پشتیبانی می کند. با این حال، اگر قالب شما آیکون های منو را پشتیبانی نمی کند، ما برای شما یک راه حل داریم. ادامه مطلب این پست به دانستن چگونگی اضافه کردن آیکون Font Awesome به آیتم های منو می پردازد.


 مرحله 1. دانلود و نصب NS Font Awesome

  • به صفحه افزونه NS Font Awesome بروید و آن را دانلود کنید.
  • وارد قسمت مدیریت administrator سایت خود شوید.
  • به افزونه ها > مدیریت بروید.
  • بر روی گزینه آپلود فایل بسته کلیک کرده و فایل زیپ آن را آپلود کنید.

 مرحله 2. فعال کردن افزونه NS Font Awesome

  • به افزونه ها > پلاگین ها بروید.
  • افزونه "System - NS Font Awesome" را پیدا کرده و آن را فعال کنید.

System NS Font Awesome

 این افزونه فایل های لازم را برای کار کردن آیکون های Font Awesome در سایت شما بارگذاری می کند.


 مرحله 3. دانلود و نصب RokCandy

برای اضافه کردن آیکون ها، تگ <i> مورد نیاز است، با این حال جوملا اجازه نمی دهد که آن را به طور مستقیم در عنوان آیتم منو اضافه کنید. ما به RokCandy نیاز داریم تا اصول جوملا را به اصطلاح دور بزنیم.

  • به صفحه  RokCandy بروید و آن را دانلود کنید.
  • آن را از طریق افزونه ها > مدیریت نصب کنید.

 مرحله 4. ایجاد یک دستور ماکرو با RokCandy

  • برای این منظور به Components> RokCandy > Macros بروید.

 Macros

  •  بر روی دکمه New کلیک کنید.

 NewMenu Links

  • در ناحیه ی متن نوع ماکرو تایپ کنید.
  • در ناحیه Html متن زیر را وارد کنید:
<i class="fa {icon}"></i>

Html

  • بعد از انجام دادن همه مراحل بالا آن را ذخیره کنید

مرحله 5. از ماکرو در یک مورد منو استفاده کنید.

  •  وارد منوها شوید و در آنجا وارد آیتم منو خود شوید.

مثلا می خواهیم با استفاده از اسیپت زیر نماد کاربر را در کنار متن "About" قرار دهیم:

 About

About

 در مثال بالا، fa-user یک کلاس برای رائه نماد کاربر است. برای دانستن آیکون های کلاس که در دسترس هستند، نگاهی به لیستی از سایت توسعه دهنده Font Awesome خواهید دید.

  • به برگه نمایش صفحه بروید.
  • عنوان صفحه مرورگر را تنظیم کنید. عنوان منو را اما بدون macro وارد کنید.

Page Display tab

  • تنظیمات را ذخیره و صفحه را ببندید.

 مرحله 6. نتیجه را بررسی کنید.

برای پیش نمایش این نماد از سایت عمومی خود بازدید کنید:

result icon

این مطلب را به اشتراک بگذارید در :

نظرات (0)

تابحال برای این مطلب نظری داده نشده است .

نظر خود را اضافه کنید.

  1. ارسال نظر به صورت مهمان . ثبت نام یا ورود
پیوست ها (0 / 1)
Share Your Location
تا 70% تخفیف برای محصولات ، جهت اطلاع از تخفیف این محصولات در کانال تلگرام ما عضو شوید عضویت در کانال تلگرام
Toggle Bar