Ну на счет грамотной реализации не уверен :) Я не очень в программировании.
Объясню, как сделал.
У меня сайт на 1 языке всё равно и видимо это не самая лучшая реализация, потому что при мультиязычности получатся косяки.
В catalog.tpl
<div class="cart"><a title="Купить" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button_grid"><span><?php echo " "; ?></span></a></div>
<div class="wishlist"><a title="Добавить в закладки" onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo " "; ?></a></div>
<div class="compare"><a title="Добавить в сравнение" onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo " "; ?></a></div>Т.е. добавил тайтл и удалил строку. В ксс:
a.button_grid span {
background: url("../image/buy.png") no-repeat scroll 0 0 transparent;
font-size: 13px;
line-height: 12px;
padding-left: 15px;
}
.product-list .wishlist a {
text-decoration: none;
/*display: block;*/
font-size:15px;
padding-left: 15px;
background: url('../image/wish.png') left center no-repeat;
}
.product-list .compare a {
text-decoration: none;
font-size:15px;
padding-left: 15px;
background: url('../image/compare.png') left center no-repeat;
}
Иконки брал отсюда, как уже заметили: http://www.iconfinder.com/search/?q=iconset%3ASiena
Когда делаешь списком, то фигня в том, что иконки всё равно остаются, хотя при таком логичнее было бы, чтобы был уже текст (там больше места). Я не придумал, как сделать так, чтобы он текст добавлял от того, что отображение list. Просто когда такое отображение, в ксс сделал иконку покупки побольше размером.