turn "add to cart" text into image

-- url of the page with the problem -- : www.babyartikelen-buysse.be/newsite2015/...t/27-ophelie-zuignap
-- HikaShop version -- : 2.6.0
-- Joomla version -- : 3.4.5

Hello,

I have used the search and found a couple of solutions but none of them work for me!

possible solution that failed 1

possible solution that failed 2

Whats the problem?
I try to get a image of a cart where it says " add to cart".
i have changed the CSS.

this is the part i have changed to try and display a cart icon:
i added the stuff in bold.
When you look at my site it wont show the icon.

Anyway you can help me get an icon in place of the text?



Kind regards

Bram

Hi,

Have you tried to inspect code with firebug?
Cause looking with it, this is the code it shows on line 292 frontend_custom_css:

a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button {
width: 50px;
height: 50px;
text-decoration: none;
color: #777 !important;
cursor: pointer;
display: inline-block;
line-height: 18px;
margin: 5px;
padding: 3px 8px;
text-align: center;
box-shadow: none !important;
text-shadow: none !important;
border-width: 1px;
border-style: solid;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-color: #EEE #DDD #DDD #EEE;
border-radius: 3px;
background: transparent -moz-linear-gradient(center top , #FFF, #EEE) repeat scroll 0% 0%;
}

There is nothing about background image.

Adding this should work:

background-image: url("/images/YOUR_IMAGE_NAME.jpg");


In this case you need to add your image in public_html/images folder

Thanks

@Bram:

You'll need to use a correct relative path and an "!important". So, instead of your code line make it

@Bram:

Since you're using <a>nchors for buttons instead of <input>, I shall not forget to mention an even simpler way:

Use a language override like

You may need fewer or more "../", just try.
Anyway, this way you'll keep the button background color/gradient, hover effects for it, and other values will be easier to be set, too.

Needless to say: if you're using this language override, you'll want to remove your CSS modification, of course.

hikashop.com/download/languages.html#modify

Hello again,

Thank you for the fast help! The problem was with the code and the relative path.
It has almost been solved!

Thanks guys!!!

Greetings

Bram