App-Feature-Slider – Custom icons

[Saijan]

Hey there,

I would like to replace the icons of the App-Feature-Slider (currently shortcodes from IcoMoon) with custom icons I created myself.
The icons I want to use are available in .png and .svg format. Could you pls tell me the easiest way to implement my custom icons and use them for the Feature-Slider. That would help me a lot.

Regards
Sai

[Raghavendra]

You can provide a custom icon of your own and use CSS to populate the images instead of the icons this way –

[tab_slide tab_icon="my-image-icon1" tab_name="Pin Location"]

and related CSS for this slide –

i.my-image-icon1 {
    width: 128px; /* Icon Image Width */
    height: 128px; /* Icon Image Height */
    background: url(http://mydomain.com/wp-content/uploads/sites/13/2016/01/feature-icons1.png);
    display: block;
    margin-bottom: 20px;
}

This is the easiest way as compared with meddling with PHP code.

[Saijan]

Thank you very much! That worked perfectly for me.

I have just one question left regarding that matter: How can I set the color change for the icon which is currently selected. At the moment just the fonts turn red, but I would like the fonts and the icon to turn yellow as soon as they are selected.

Regards
Sai

[Veena]

Can you share a link to your site?

[Saijan]

Sure: http://urbanx.info

[Saijan]

Does nobody have an answer?

[Raghavendra]

I am sorry we missed your query. You just have to create and upload a new set of yellow colored icons and set it as a background via CSS this way –

.flex-active i.my-image-discover {
    background: url(http://urbanx.info/wp-content/uploads/2016/10/Search-1-e1481110481594-yellow.png);
}

.flex-active i.my-image-meet {
    background: url(http://urbanx.info/wp-content/uploads/2016/10/Meet-e1481110420910-yellow-yellow.png);
}

.flex-active i.my-image-create {
    background: url(http://urbanx.info/wp-content/uploads/2016/10/Create-grau-e1481110319855-yellow.png);
}

.flex-active i.my-image-share {
    background: url(http://urbanx.info/wp-content/uploads/2016/10/Share-e1481110132147-yellow.png);
}

[Saijan]

No problem! Thank you very much for your help. Got all my problems solved (;

[Author]

Posts