如何将字体真棒图标添加到Joomla菜单

Question

This is a simple method to add font awesome icons to joomla menu.

Open modules/mod_menu/tmpl/default.php

Find

foreach ($list as $i => &$item) :

After the foreach add this function.

if(strpos($item->title,"fa-") !== false){
    $titleArray = explode("fa-",$item->title);        
    $item->title = "";
    for($i=0;$i<count($titleArray);$i++){
        if($i){
            $item->title .= "<i class=\"fa fa-".$titleArray[$i]."\"></i>";
        }else{
            $item->title .= $titleArray[$i];
        }
    }       
}

When you go to joomla menu manager put font awesome class after the menu title.

Like this.

Home fa-coffee

Answer 1

Try Below:

      if(strpos($item->title,"|") !== false){
                $titleArray = explode("|",$item->title);        
                $item->title = "";
                for($i=0;$i<count($titleArray);$i++){
                    if($i){
                        $item->title .= html_entity_decode("<i class=\"fa ".$titleArray[$i]."></i>");
                    }else{
                        $item->title .= $titleArray[$i];
                    }
                }       
            }

Answer 2

Had a similar problem on a website I'm working on at the moment. Joomla 3 has the ability to add a 'link css style' which if filled in with a font awsome style (ie 'fa fa-home') will add the font awsome class to the 'a' tag It works but it does not follow the FA guidelines of putting in in a 'i' tag. If you want to do it property in joomla 3, here is my solution.
First we need to create a module override for the menu
Go to your template directory if not exisits, create a new directory called HTML
inside HTML create a new directory mod_menu
copy the following files from the /modules/mod_menu/tmpl directory and paste them in the templates/yourtemplate/HTML/mod_menu directory:-
default.php
default_url.php
default_component.php
Joomla only lets you override the default.php file so to get around this rename
default_url.php and default_component.php
to
default_url2.php and default_component2.php
(Make sure you are in the newly created module override directory as it's easy to edit the original and not the copy.
open default.php
at or around line 75
change both instances of default_url to default_url2
change default_component to default_component2

// Render the menu item.
switch ($item->type) :
    case 'separator':
    case 'url':
        require JModuleHelper::getLayoutPath('mod_menu', 'default_url2');
        break;
    case 'component':
        require JModuleHelper::getLayoutPath('mod_menu', 'default_component2');
        break;
    case 'heading':
        require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);
        break;

    default:
        require JModuleHelper::getLayoutPath('mod_menu', 'default_url2');
        break;
endswitch;

Now we have control over default, default_url2 and default_component2

Open default_component2.php Basically we need to see whether there is a font awsome style in the 'link css style' If there is, save the style name in a variable then delete it from the link css style. Then we can add the 'i' tag with the saved font awsome style. here is the code at or around line 13 replace

$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';

with

$anchor_css = $item->anchor_css;
if (preg_match_all("/(fa-[-a-z0-9]+)/", $anchor_css, $fa)){ //look for a font awsome class name beginning with fa- if found the lass name is stored in $out[0][0]
    $anchor_css = preg_replace("/(fa-[-a-z0-9]+)/", "", $anchor_css);   //remove the font awsome class name starting with fa-
    $anchor_css = preg_replace("/fa/", "", $anchor_css);    //remove the fa prefix from the class
    $anchor_css = preg_replace('!\s+!', ' ', $anchor_css);  //remove multiple spaces and replace with a single space
    $anchor_css = trim($anchor_css);    //remove leading/trailing spaces
}
$fa_icon = $fa[0][0] ? '<i class="fa '.implode(' ',$fa[0]).'" ></i>' :'';   //if a font awsome class name exists, create an <i></i> tag
$class = $anchor_css ? 'class="' . $anchor_css . '" ' : '';

Now we need to add the icon into the code at or around line 34 add echo $fa_icon; to where you want the font awsome icon to appear. I want mine before the 'a' tag so here is my new switch

switch ($item->browserNav)
{
    default:
    case 0:
        echo $fa_icon;
        ?>
        <a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a>
        <?php
        break;
    case 1:
        // _blank
        echo $fa_icon;
        ?>
        <a <?php echo $class; ?>href="<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a>
        <?php
        break;
    case 2:
    // Use JavaScript "window.open"
        echo $fa_icon;
        ?>
        <a <?php echo $class; ?>href="<?php echo $item->flink; ?>" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a>
        <?php
        break;
}

if you want the font awsome icon to be within the 'a' tag just simply move the

echo $fa_icon;

ie

switch ($item->browserNav)
{
    default:
    case 0:
        ?>
        <a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $fa_icon . $title; ?>><?php echo $linktype; ?></a>
        <?php
        break;
    case 1:
        // _blank
        ?>
        <a <?php echo $class; ?>href="<?php echo $item->flink; ?>" target="_blank" <?php echo $fa_icon . $title; ?>><?php echo $linktype; ?></a>
        <?php
        break;
    case 2:
    // Use JavaScript "window.open"
        ?>
        <a <?php echo $class; ?>href="<?php echo $item->flink; ?>" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $fa_icon . $title; ?>><?php echo $linktype; ?></a>
        <?php
        break;
}

Repeat the above for default_url2.php the first part of the code is exactly the same however the switch in the default_url is different to the default_component

switch ($item->browserNav) :
    default:
    case 0:
        echo $fa_icon;
        ?>
        <a <?php echo $class; ?>href="<?php echo $flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
        break;
    case 1:
        // _blank
        echo $fa_icon;
        ?>
        <a <?php echo $class; ?>href="<?php echo $flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
        break;
    case 2:
        // Use JavaScript "window.open"
        $options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,' . $params->get('window_open');
        echo $fa_icon;
        ?>
        <a <?php echo $class; ?>href="<?php echo $flink; ?>" onclick="window.open(this.href,'targetWindow','<?php echo $options;?>');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
        break;
endswitch;

Save all your files and that's it To add a font icon to your menu item just go to the joomla menu manager, open up a menu item, click on the 'Link Type' tag and add your fa style to the link css style field in the form of 'fa fa-home' Click save, open the fron end, refresh and BINGO!