Joomla 3.0 template not showing Print, Email and Edit icons - article

Question

I have a joomla 3.0 custom template, with no overrides. The issue I am having is that the Print, Email and Edit icons do not show, instead, these show in form of a vertical list. Also note that I have enabled "Show Icons" in both Article Options and Menu Items. I know the code in default.php is what is mean't to display these icons, see below: -
<?php if (!$this->print) : ?>
<?php if ($canEdit || $params->get('show_print_icon') || $params->get('show_email_icon')) : ?>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-cog"></span> <span class="caret"></span> </a>
<?php // Note the actions class is deprecated. Use dropdown-menu instead. ?>
<ul class="dropdown-menu actions">
<?php if ($params->get('show_print_icon')) : ?>
<li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $this->item, $params); ?> </li>
<?php endif; ?>
<?php if ($params->get('show_email_icon')) : ?>
<li class="email-icon"> <?php echo JHtml::_('icon.email', $this->item, $params); ?> </li>
<?php endif; ?>
<?php if ($canEdit) : ?>
<li class="edit-icon"> <?php echo JHtml::_('icon.edit', $this->item, $params); ?> </li>
<?php endif; ?>
</ul>
</div>
<?php endif; ?>
<?php else : ?>
<div class="pull-right">
<?php echo JHtml::_('icon.print_screen', $this->item, $params); ?>
</div>
<?php endif; ?>
But I see no problem in the above code, I have even created overrides and still no change which means the template is not the problem. Why is this so? do I need to change the location of the images folder? what should I do to replace the links with the icons?
Regards.

Answer 1

I've been working on migrating a 1.5 template to 3.0 as well. The reason the icons are gone is that Joomla no longer uses them or adds them in the same way. In current template they are using Bootstrap and for good reason (as bakual indicated). If you are doing a direct port of an old template and want to keep the old look and feel you can add the following css to your template.
.pull-right{
float:right;
}
.btn-group{
position:relative;
margin-top:-30px;
}
.btn-group ul{
list-style:none;
display: inline;
padding-left:4px;
}
.print-icon{
background: url(../images/printButton.png) no-repeat;
height: 16px;
width: 16px;
overflow: hidden;
display: inline-block;
}
.email-icon{
background: url(../images/emailButton.png) no-repeat;
height: 16px;
width: 16px;
overflow: hidden;
display: inline-block;
}
.print-icon a,
.email-icon a{
color:transparent;
}
You may have to massage the numbers a bit depending on your template and add some stuff to get other icons I didn't add but you get the idea at least. Also to get the icon I just looked at an old version of the site and copied them into my template in the image folder.

Answer 2

The default output uses Bootstrap markup. The icons are generated by the Icomoon fontset and the Javascript included in Bootstrap will wrap the list together into a dropdown menu.
If you only see a flat list of those items, that means you neither have the Bootstrap CSS loaded nor the Bootstrap Javascript framework.
The Javascript framework can be loaded using JHtml::_('bootstrap.framework');
The CSS can be loaded by included one of the files found in media\jui\css. Or by compiling your own from the LESS files in media\jui\less.