使用精灵时在Joomla中隐藏菜单项

Question

I want to create a menu item in Joomla 3 however use a sprite image instead of the link name. To do so I use the following html code and CSS to add a background image.

<a class="mobile-icon-cart sprite" href="/index.php/cart" style="width: 40px; height: 40px; display: block;">Cart</a>

How can I hide the text "Cart" in a nice way. Hiding the text from Joomla backend only works when uploading a picture but then I can't use the sprite image. Also I would not like to use color:#fff; for text.

Answer 1

Can't you use display:none ?
If you can't use display:none , you can try with removeChild() http://www.w3schools.com/jsref/met_node_removechild.asp or removeAttribute() http://www.w3schools.com/jsref/met_element_removeattribute.asp

Answer 2

Use

width:0;
height :0; 
padding :40px 40px 0 0; 
overflow: hidden ; 
display: block;