how can add span in breadcrumbs in magento?

Question

I want to change in breadcrumbs in result page. i am change in result page breadcumb.

at time my breadcrumbs html this

<ul class="grid-full">
                    <li class="home">
                            <a title="Go to Home Page" href="http://mdz.potenzademo.ga/">Home</a>
                                        <span><i class="fa fa-angle-right"></i></span>
                        </li>
                    <li class="search">
                            <strong>Search &gt; ring</strong>
                                    </li>
            </ul>

i want span at <li class="search"> <strong>Search &gt; ring</strong> </li> between search and ring

<li class="search">  <strong>Search <span><i class="fa fa-angle-right"></i></span> ring</strong> </li>

result.php my breadcrumbs code

$breadcrumbs = $this->getLayout()->getBlock('breadcrumbs');
        if ($breadcrumbs) {
            $title = $this->__("Search > %s",$this->helper('catalogsearch')->getQueryText());

            $breadcrumbs->addCrumb('home', array(
                'label' => $this->__('Home'),
                'title' => $this->__('Go to Home Page'),
                'link'  => Mage::getBaseUrl()
            ))->addCrumb('search', array(
                'label' => $title,
                'title' => $title

            ));
        }

Please tell me what i change

Answer 1

The text you put in the breadcrumbs is escaped before printing so you won't be a victim of XSS. So any tag you put in the breadcrumbs label will be shown as a tag in the frontend and won't be interpreted.
But you can achieve what you need like this

You need to add after this line:

$title = $this->__("Search > %s",$this->helper('catalogsearch')->getQueryText());

This:

$label = $this->__('Search <span><i class="fa fa-angle-right"></i></span>');
$label .= Mage::helper('core')->escapeHtml($this->helper('catalogsearch')->getQueryText());

This will make your query string escaped before sending it to the breadcrumbs template.
You will also have 2 variables instead of one. $title will still have the original text so you can use it as title for the span element (this will be escaped) and $label that you can use as the span innerHTML. Now you need to tell the template not to escape the $label again.
So replace this

 ->addCrumb('search', array(
     'label' => $title,
     'title' => $title
 ))

with

 ->addCrumb('search', array(
     'label' => $label,
     'title' => $title,
     'no_escape' => true
 ))

Now you need to edit the breadcrumbs template an remove the htmlEscape when the no_escape element is true.

Replace this section

<?php if($_crumbInfo['link']): ?>
    <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>
<?php elseif($_crumbInfo['last']): ?>
    <strong><?php echo $this->htmlEscape($_crumbInfo['label']) ?></strong>
<?php else: ?>
    <?php echo $this->htmlEscape($_crumbInfo['label']) ?>
<?php endif; ?>

with this

<?php 
if (isset($_crumbInfo['no_escape']) && $_crumbInfo['no_escape']) : 
    $label = $_crumbInfo['label'];
else : 
    $label = $this->htmlEscape($_crumbInfo['label']) ;
endif;?>
<?php if($_crumbInfo['link']): ?>
    <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $label ?></a>
<?php elseif($_crumbInfo['last']): ?>
    <strong><?php echo $label ?></strong>
<?php else: ?>
    <?php echo $label ?>
<?php endif; ?>