Проблема с отступом

[_Tornado_]

Здравствуйте!

Есть горизонтальное меню, перед одним из пунктов должна быть иконка. Вывод:

<?php
	 $title = {"Главная","Отчетность","Обучение","Услуги","Контакты"};

	 for($i=0; $i<count($title); $i++)
	 {
	 	if($i=3)
		{
			echo "<a class=\"on\"><span class=\"icon\">{$title[$i]}</span></a>\n";
		}
		else
		{
			echo "<a class=\"on\">{$title[$i]}</a>\n";
		}
	 }
?>

стили:

div.main_menu {
	font-size:13px;
	font-weight:bold;
	line-height:16px;
	background:#cfc9ab url(img/menu_bg.gif) repeat-x left bottom;
}
div.menu_pos {
	padding:0px 0px 14px 0px;
}
div.main_menu a {
	color:#130f0b;
	text-decoration:none;
	margin:0px 10px 0px 23px;
	height:20px;
	padding-top:7px;
	float:left;
}
div.main_menu a:hover {
	padding-top:4px;
	border-top:3px solid #A66452;
}
div.main_menu a.on{
	padding-top:4px;
	border-top:3px solid #A66452;
}

div.main_menu .icon {
	background:url(img/lock.gif) no-repeat;
	border:0px;
	width:12px;
}

Иконка лезет на текст.

Вопрос: как сделать отступ между иконкой и текстом? Помогите, пожалуйста)

[stars]

мб

div.main_menu .icon {
	background:url(img/lock.gif) no-repeat;
	border:0px;
	width:12px;
	margin-right: 15px;
}

Хотя... Можете показать html код этой менюшки меня смущает {$title[$i]} возможно все не так как я представляю )

Edited September 17, 2010 by stars

[_Tornado_]

Спасибо за ответ, я разобралась, все работает.

нужно было написать так:

echo "<a class=\"on\"><span class=\"icon\"></span>{$title[$i]}</a>\n";

и так:

div.main_menu .icon {
	background:url(img/lock.gif) no-repeat;
	border:0px;
	width:12px;
	padding-right: 15px;
}