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


How to add Font Awesome Icons to Joomla Menu

这是一个将字体很棒的图标添加到joomla菜单的简单方法。

打开模块/mod_menu/tmpl/default.php

查找

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

在foreach之后添加此函数。

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];
        }
    }       
}

当你去joomla菜单经理把字体真棒类后的菜单标题。

就像这样。

首页fa咖啡

下面试试:

      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];
                    }
                }       
            }

我目前正在开发的一个网站上也遇到了类似的问题。Joomla 3能够添加一个"链接css样式",如果用字体awsome样式(即"fa fa home")填充,则会将字体awsomes类添加到"a"标记中。它可以工作,但不遵循fa在"i"标记中添加的指导原则。如果你想在joomla3中做it属性,这里是我的解决方案
首先,我们需要为菜单创建一个模块覆盖
转到您的模板目录如果不存在,请创建一个名为HTML的新目录
在HTML中创建一个新目录mod_menu
从/modules/mod_menu/tmpl目录复制以下文件,并将它们粘贴到templates/yourtemplate/HTML/mod_mnu目录中:-
default.php
default_url.php
default_component.php
Joomla只允许您覆盖default.php文件,以便绕过此重命名
default_url.php和default_component.php

default_url2.php和default_component2.php
(请确保您位于新创建的模块覆盖目录中,因为很容易编辑原件而不是副本。
打开default.php
在75线或附近
将default_url的两个实例都更改为default_url2
将default_component更改为default_compoonent2

// 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;

现在我们可以控制default、default_url2和default_component2

打开default_component.php基本上,我们需要看看"链接css样式"中是否有字体awsome样式如果有,请将样式名称保存在变量中,然后从链接css样式中将其删除。然后我们可以用保存的字体awsome样式添加"i"标记。这是代码在13号线或附近更换

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

带有

$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 . '" ' : '';

现在我们需要将图标添加到代码中在第34行或其周围添加echo$fa_icon;到您希望字体awsome图标出现的位置。我想要我的在"a"标签之前,所以这是我的新开关

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;
}

如果您希望字体awsome图标位于"a"标记内,只需移动即可

echo $fa_icon;

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;
}

对default_url2.php重复上述操作。代码的第一部分完全相同,但default_url中的开关与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;

保存所有文件就这样要在菜单项中添加字体图标,只需转到joomla菜单管理器,打开一个菜单项,单击"链接类型"标记,并以"fa fa home"的形式将您的fa样式添加到链接css样式字段中点击保存,打开前端,刷新并BINGO!