platform/app/themes/quick/quick5.html

<style>
	.quick.quick-quick5 {height:50px; text-align:center; padding:0; margin:0; list-style:none; border-top:1px solid #4b3e38; position:fixed; z-index:200; bottom:0; left:0; width:100%; display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -webkit-box-sizing: border-box; background:-webkit-gradient(linear, 0 0, 0 100%, from(#5e544f), to(#433c38));}
	.quick.quick-quick5 li{width:20%;}
	.quick.quick-quick5 li span{overflow:hidden;}
	.quick.quick-quick5 li a.fa.fa-home{font-size:40px; margin-top:5px;}
	.quick.quick-quick5 li a.fa.fa-home:hover{text-decoration:none;}
	.quick.quick-quick5 li>a{color:#8c8f94; text-decoration:none; -webkit-box-sizing:border-box; box-sizing:border-box; border-bottom:0; display:block; height:50px; text-align:center; -webkit-tap-highlight-color:rgba(0,0,0,0);}
	.quick.quick-quick5 li>a>*{pointer-events:none;}
	.quick.quick-quick5 li>a>p{display: block; width:25px; height:25px; padding-top:5px; margin:auto; -webkit-background-size:100px auto;}
	.quick.quick-quick5 li>a>p i{ display:block; width:20px; height:20px; font-size:20px;}
	@-moz-document url-prefix(){
		.quick.quick-quick5{background:#594F4A;overflow:hidden;}
		.quick.quick-quick5 li{width:20%;float:left;}
	}
</style>
<div class="quick quick-quick5">
		{php $i = 1;}
		{loop $_W['quickmenu']['menus'] $nav}
		<li>
			{if $i==3}
			<a href="{$nav['url']}" class="fa fa-home"></a>
			{else}
			<a href="{$nav['url']}" title="{$nav['name']}">
				<p>
					{if !empty($nav['icon'])}
					<i style="background:url({media $nav['icon']}) no-repeat;background-size:cover;{$nav['css']['icon']['style']}"></i>
					{else}
					<i class="fa {$nav['css']['icon']['icon']}" style="{$nav['css']['icon']['style']}"></i>
					{/if}
				</p>
				<span style="{$nav['css']['name']}">{$nav['name']}</span>
			</a>
			{/if}
		</li>
		{php if($i>=5) break;}
		{php $i++;}
		{/loop}
</div>