ورود کاربران

ورود کاربران

چگونه به عنوان منو یا ماژول جوملا آیکون اضافه کنیم ؟

5 1 1 1 1 1 (1 Vote)

یکی از مهمترین قسمت های وبسایت منوهای آن می باشد ، همیشه طراحان وبسایت در تلاش هستند که بعضی از صفحات را مهم تر از دیگر صفحات نمایش دهند یکی از این روش ها استفاده از آیکون در منو است که این کار در جوملا به سادگی هنگام ساختن یک منو امکان پذیر می باشد که یک تصویر کوچک در کنار آن منو به صورت آیکون (icon) قرار دهیم ولی استفاده از یک تصویر با سایز کوچک جذابیت کمتری نسبت به استفاده از تصاویر vector دارد که در رزولوشن های بالا هم کفیت عالی را از خود به نمایش می گذارند

 

در طی چند سال اخیر استفاده از فونت آیکون ها در طراحی وبسایت بسیار باب شده است فوت آیکون ها تصاویر وکتوری هستند که می توان آنها را با کلاس های css  فرا خوانی کرد ، وبسایت fontawesome.io یکی از بانک های آیکون های وکتور است این وبسایت با ابزار های که در اختیار طراحان قرار می دهد استفاده از ایکون ها را در هرجای وبسایت به راحتی امکان پذیر می کند ، استفاده از آیکون های این وبسایت به علت محبوبیت بالا بین طراحان به یک استاندارد در طراحی UI تبدیل شده است در این مقاله قصد دارم به شما بی آموزم که چطور از این آیکون ها در وبسایت جوملایی خود استفاده کنید بعضی از فریم ورک های جوملا خاصیت استفاده از آیکون های fontawesome را در قالب های خود فراهم کرده اند از جمله فریم ورک های Helix2 ، Warp7 و... اگر قالب شما از این دسته از فریم ورک ها نیست و شما نمی توانید به راحتی از آیکون های وکتور در منوهای جوملا خود استفاده کنید با استفاده از این آموزش می توانید از این پس از این آیکون ها در جوملا و منو های جوملا خود استفاده نمایید علاوه بر این در عنوان ماژول ها هم می توانید از این آیکون ها استفاده کنید.

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3

 

قدم اول : نصب پلاگین NS Font Awesome

افزونه  NS Font Awesome page را از قسمت افزونه های جوملا دانلود کنید یا با استفاده از لینک زیر این پلاگین را مستقیم از سایت سازنده ی آن دریافت نمایید

https://nswd.co/extensions/free/fontawesome

 

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3 

 

سپس وارد قسمت مدیریت جوملا شوید

وارد قسمت افزونه ها > نصب > بارگذاری فایل

فایلی که دانلود کرده اید را بارگذاری و نصب کنید

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

 

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3

 

چه اتفاقی افتاد ؟! در واقع با نصب این پلاگین شما کلیه آیکون های سایت fontawesome را در سایت جوملایی خود دارید با استفاده از کلاس های  css  ایکون ها می توانید آنها در وبسایت جوملایی خود فراخانی کنید در قدم بعدی کار شما را ساده تر می کنیم !

 

قدم دوم : نصب کامپوننت RokCandy

وارد لینک زیر شوید و کامپوننت RokCandy   را دانلود و مانند قسمت بالا نصب کنید

http://www.rockettheme.com/joomla/extensions/rokcandy

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3

بعد از دانلود و نصب این افزونه از قسمت کامپوننت ها در مدیریت جوملا وارد کامپوننت RokCandy قسمت Macros شوید

کامپوننت ها > Rokcandy < Macros

 

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3

 

روی دکمه سبز رنگ جدید (NEW) کلیک کنید

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3

در قسمت متن Macros عبارت زیر را بنوسید

[x]{icon}[/x]

سپس در قسمت Html عبارت زیر را بنوسید

<i class="fa {iconfa}"></i>

مانند تصویر زیر

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3 

 

سپس روی ذخیره و بستن کلیک کنید حال در قدم بعدی شما می توانید به راحتی از آیکون ها در منو یا نام ماژول ها استفاده کنید

 

قدم سوم : فراخوانی ایکون در عنوان منو

وارد قسمت منوها و گروه منوی مورد نظر خود شوید و یک منوی جدید ایجاد نمایید

حالا با یک مثال اضافه کردن آیکون در منو را توضیح می دهم استفاده از آیکون در ماژول ها بر عهده خود شما که درست مانند مثال زیر است

در قسمت عنوان منو مانند تصویر  این عبارت را درج کنید

[x]fa-user[/x] تست

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3 

نوع آیتم منو خود را انتخاب کرده مثلا یک مطلب خاص

در این مثال از کلاس fa-user استفاده کرده ام این کلاس را از آیکون های سایت fontawesome.io برداشته ام به این صورت که وارد لینک زیر شوید

http://fontawesome.io/icons/

لیستی از ایکون ها را در این صفحه مشاهده می کنید

از آیون ها جدید بگذرید و یک آیکون از قسمت های پایین تر انتخاب کنید و روی آن کلیک کنید

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3

 

من آیکون user را انتخاب کردم بعد از کلیک بر روی آیکون وارد صفحه جدیدی می شوید که در آنجا کلاس ایکون نوشته شده است

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3

 

این کلاس (fa-user) شناسه آیکون می باشد که با استفاده از این کلاس می توانید آیکون مورد نظر را از فونت ها فراخوانی کرد و در قسمت عنوان منو به این صورت "[x]fa-user[/x]" درج نمود در ماژول ها هم به همین صورت در قسمت عنوان می توان آیکون را درج کرد

صبر کنید قبل از اینکه منوی خود را ذخیره کنید و حاصل این آموزش را ببینید به یک نکته توجه داشته باشید در جوملا به صورت اتوماتیک عنوان title صفحه مرورگر از عنوان منو گرفته می شود مگر اینکه به صورت دستی در عنوان مرورگر وارد شود در قسمت منوی جدید از تب ها وارد تب "نمایش صفحه" شوید و عنوان مرورگر را تایپ کنید مانند تصویر زیر اگر این کار انجام نشود عنوان مروگر در منوی مورد نظر به این صورت نمایش داده می شود "[x]fa-user[/x] تست" که شکل جالبی ندارد

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3

منو را ذخیره کرده و حاصل دست رنج خود را مشاهده کنید

 

استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3استفاده از ایکون های fontawesome در جوملا در منو و عنوان ماژول ها در جوملا استفاده از آیکون های وکتور در منو ها و عنوان ماژول ها در جوملا 3

 

چند نکته :

  1. بانک آیکون های سایت fontawesome.io مرتب در حال آپدیت است ولی شما این آیکون ها را با پلاگین NS Font Awesome  در قدم اول این مقاله در جوملا نصب و فراخوانی کردید ممکن است این پلاگین به صورت خود سایت FontAwesome آپدیت نشده باشد و تمام آیکون های موجود در سایت را نداشته باشد پس اگر از آیکون های جدید سایت استفاده کردید و نمایش داده نشدن تعجب نکنید !
  2. سوالی که اینجا برای خیلی از شما مطرح می شود این است که چطور سایز این ایکون ها را در منو یا عنوان ماژول بزرگ یا کوچک کنیم ؟ باید بگم از آنجا که این آیکون ها فونت هستند پس اندازه خود را از فونت ها و تگ Html می گیرند یعنی اندازه فونت منو یا عنوان ماژول سایت شما هر مقدار باشد ایکون کناری آن هم به همان اندازه نمایش داده می شود و برای بزرگ یا کوچک کردن آن باید اندازه font-size عنوان آن تغییر کند که این کار را باید با دستورات css انجام می شود
  3. همان طور که در بالا هم ذکر کردم بعضی از فریم ورک های جوملا خاصیت استفاده از ایکون را در منو ها دارند که هنگام درج یک منوی جدید می توان از آن استفاده کرد ولی هیچکدام خاصیت اضافه کردن ایکون در عنوان ماژول ها را ندارند شما با استفاده از این شیوه به عنوان ماژول های خود هم می توانید آیکون اضافه کنید

 نویسنده : آرش مرادی

 

نظرات (2)

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

ارسال نظر به عنوان مهمان

0 / 2000 محدودیت حروف
متن شما باید بین 5 تا 2000 حرف باشد