{if !empty($icons)}
	<link id="ait-style" rel="stylesheet" type="text/css" media="all" href="{$themeUrl}/design/css/icon-menu.css">
	<script type="text/javascript" src="{$themeUrl}/design/js/libs//jquery.min.js"></script>
	<script type="text/javascript" src="{$themeUrl}/design/js/libs/jquery-ui.min.js"></script>
	
	<script type="text/javascript" src="{$themeUrl}/design/js/libs/jquery.iconmenu.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#sti-menu').iconmenu();
		});
	</script>
	{var $width = 1022}
	{var $i = 0}
	
	{foreach $icons as $icon}
	{var $i++}
	{/foreach}
	
	{var $widthLi = ($width/$i)-1}
	{var $widthItems = $widthLi-20}
	<style type="text/css" scoped="scoped">
		ul#sti-menu li { width: {!$widthLi}px }
		.sti-menu li a h2, .sti-menu li a h3, .sti-menu li a span{ width: {!$widthItems}px; }
		.sti-menu li a span { width: {!$widthItems}px; }
	</style>
	<ul class="sti-menu clearfix clear" id="sti-menu">
		{foreach $icons as $icon}
		<li data-hovercolor="{$icon->options->iconMenuLabelColor}">
			<a href="#">
				<h2 class="sti-item" data-type="mText">{$icon->title}</h2>
				<h3 class="sti-item" data-type="sText">{$icon->options->iconMenuLabel}</h3>
				<span class="sti-icon sti-item" data-type="icon" style="background: url('{$icon->options->iconMenuImage}') no-repeat top center"></span>
			</a>
		</li>
		{/foreach}
	</ul>
	
{/if}