Icon Colors

[jovo]

Hello. What’s the easiest way to adjust the icon colors? For example, I have 3 icon boxes, each within a 1/3 column. From what I can see, there doesn’t seem to be a way for me to apply a different color to each icon. Can you please provide an example? Hope this will eventually be an option within the short-code itself. Thanks!

[Swift Ideas – Ed]

It’s not currently an option, but it’s definitely on the list for adding a colour option. Would definitely make it much easier I agree!

– Ed

[arkercon]

Hi Swift Team,
I have a page with three spb_icon_box, and I would like to make the icons different colors, (text and title can be default).
Have you added this option to the Dante theme since this thread?

Here is another thread that refers to something similar but mentions only that he was successful:

spb_icon_box title color

It’s easy enough to have multiple colors for the icon-box and icon-alt color (Appearance>Customize>Color-Icons(Extra Options)), but I haven’t found a thread about multiple colors for different icons on the same page; I only know how to change the color of all icons on the whole site.

EXAMPLE: I am using single digits for one set of three icons in icon-boxes (1, 2 & 3); I want icon 1=red, 2=blue and 3=yellow.

Can you help? Is that possible?

_K

[Rui Guerreiro – SUPPORT]

Hi @arkercon,

Can you provide us a link to the page where you have those icons?
Thanks

-Rui

[arkercon]

At the bottom of this page:

https://www.arkerconfig.com/dup-products/

[Rui Guerreiro – SUPPORT]

can you provide me admin credentials, will need to add some extra classes.
Thanks

-Rui

[arkercon]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Add the code below to your custom css and adjust the colors has desired.

/*Icon 1 color */ 
.iconbox1 .sf-icon {
    color: #000!important;
}

/*Icon 1 Border color*/
.iconbox1 .sf-icon-cont.sf-icon-icon-two {
    border-color: #3375ff!important;
}

/*Icon 1 background color hover*/
.iconbox1 .sf-icon-cont.sf-icon-icon-two:hover{
background-color: #33ff4e!important;
}

/*Icon 2 color */ 
.iconbox2 .sf-icon {
    color: #000!important;
}

/*Icon 2 Border color*/
.iconbox2 .sf-icon-cont.sf-icon-icon-two {
    border-color: #3375ff!important;
}

/*Icon 2 background color hover*/
.iconbox2 .sf-icon-cont.sf-icon-icon-two:hover{
background-color: #33ff4e!important;
}

/*Icon 3 color */ 
.iconbox3 .sf-icon {
    color: #000!important;
}

/*Icon 3 Border color*/
.iconbox3 .sf-icon-cont.sf-icon-icon-two {
    border-color: #3375ff!important;
}

/*Icon 3 background color hover*/
.iconbox3 .sf-icon-cont.sf-icon-icon-two:hover{
background-color: #33ff4e!important;
}

Hope it helps.

-Rui