Replace pixellove font with icons

Is there a way to replace pixellove font shown in menu on homepage with icons?

Hi

Of course. Try use a code like this instead:

Code: Select all

.gk-icon-dinner-set-solid:before {
    background: url("../images/spoon.png") repeat scroll 0 0 transparent;
    content: "";
    display: inline-block;
    height: 60px;
    width: 60px;
}


Thank you! That worked perfectly.

Dear Titebite,

where (template.css, style.css?) do I have to change the code you wrote at the top?

thanks for help,

claudia

Hi

Any css additional or modified code You need to add to override.css and make sure override is enabled in template settings. You need to use a different class names to refere to different icons, You can find it by looking into html and class="" value.

thanks Teitebite,

I tryed this code in my override css:

.gk-icon-dinner-set-solid:before {
background: url("../images/icon/icon_besprechung.png") repeat scroll 0 0 transparent;
content: "";
display: inline-block;
height: 60px;
width: 60px;
}
and after that the whole stylesheet seems destroyed... whoooo I was really shocked - I deleted it and than everything was back again - so my question What was wrong? can you please help me?

thanks for help sandra

This helped me a lot as I needed the same, but one follow up question, how to make these custom icons responsive instead of the static icon size?

Thanks


Heiko

Hi

Of course. Try use a code like this instead:

Code: Select all

.gk-icon-dinner-set-solid:before {
    background: url("../images/spoon.png") repeat scroll 0 0 transparent;
    content: "";
    display: inline-block;
    height: 60px;
    width: 60px;
}


Hi

@eversberg if this destroyed the stylesheet, than You have probably inserted it in a wrong place. Add it to override.css at the evey end of this file and show me site than.

@iaweb2 That's not going to be easy, but You may try percentage values and resized background option:

Code: Select all

.gk-icon-dinner-set-solid:before {
height: 10%;
width: 10%;
background-size: 100% auto;
}


thanks teitebite - it works now!

best regards, eversberg