Joomla 3.x. 如何用图像替换菜单文本

本教程将向您展示如何在Joomla菜单项中使用图像而不是文本.

Joomla 3.x. 如何用图像替换菜单文本

有几种方法可以在菜单中添加图标:

使用菜单管理器向菜单添加图像

默认Joomla菜单 module 允许您将菜单标题更改为图像:

1. 登录到Joomla管理面板.

2. Navigate to Menus > Main Menu.

3. 在下一步中，单击任意菜单项进行修改:

   

4. 将菜单项类型更改为 External Link.

5. Locate Link type options section.

6. Set Add Menu Title to No.

7. Use Select 按钮选择您的图像.

8. Click Save 按钮应用更改并检查您的网站:

   

使用CSS代码添加图像

第二种方法是基于将带有图像的css类添加到 模板/主题# # # / css /模板.css 文件(其中###是您的主题号). 一些Joomla菜单模块，如IceMegaMenu Module，不允许您从管理面板向菜单项添加图像. 你可以使用css代码添加图像:

1. Using background 图片中的CSS代码:

   1. 打开你的网站 browser 然后使用Inspect Element工具找到你需要为菜单项添加的自定义css类:

   2. 复制css类你的定位. 通常，css代码看起来像这样:

      #iceMenu_### .iceMenuTitle:{之前
        内容:url(“image_link_here”) !important;
        top: 20px !important;
        位置:相对 !important;
        显示:inline-block !important;
        行高:45 px !important;
        }
        
      #iceMenu_101 .iceMenuTitle {
        font:0/0 a !important;
        }
      

      Where ### is your menu ID. 您可以在管理面板中找到菜单项id. Under Menus > Main Menu section:

      

      And image_link_here 这个链接是你的菜单图片吗.

   3. 使用以下命令连接到服务器 FTP or hosting Cpanel.

   4. Locate templates.css file in # # # / css模板/主题 服务器上的文件夹. 在任何代码中打开该文件 editor on your computer.

   5. 在末尾添加自定义css类 templates.css file.

   6. 保存文件，将其上传到服务器，并在您的站点上检查结果.

2. Using FontAwesome icons:

   1. 使用Inspect工具检查您的站点以定位自定义css类.

   2. Edit the same 模板/主题# # # / css /模板.css 文件(其中###是您的主题号).

   3. 需要添加到模板中的CSS代码.CSS文件通常如下所示:

      #iceMenu_101 .iceMenuTitle:{之前
        字体类型:FontAwesome !important;
        content: "###" !important;
        font-size: 45px !important;
        top: 20px !important;
        位置:相对 !important;
        显示:inline-block !important;
        行高:45 px !important;
        height: 90px !important;
        }
        
      #iceMenu_101 .iceMenuTitle {
        font:0/0 a !important;
        }
      

      你的###在哪里 FontAwesome icon class. 所有可用图标的列表可以在 FontAwesome site.

   4. 不要忘记保存文件并将其上传到服务器.

   5. 检查您的站点以查看更改.

现在您知道了如何在Joomla菜单项中使用图像而不是文本.

请随时查看下面的详细视频教程:

Joomla 3.x. 如何用图像替换菜单文本