Hi itmaintainers,

Which Font Awesome icons are you trying to change?

Hi

sorry for the delay, it hasnt notified me that you responded.

Its the Icon under feature which I convert to hover. Its only comes up clear when its normal and white when it hovers.

You can see ti here -http://www.itmaintainers.co.uk - see the icons below the slider.

Thanks

Simple.
Find which css line is giving the icon it's colour and change it?

Thanks.

Where do I look for the lines?

Look in: concrete/themes/elemental/css/build/blocks/feature-template-hover-description.less

Then look at 'div.ccm-block-feature-item-hover-icon'

Thanks replying Steve.

The code there is :
div.ccm-block-feature-item-hover-icon {
border: 1px solid lighten(@body-type-color, 40%);
.border-radius(50%);
text-align: center;
vertical-align: middle;
display: table-cell;
margin: 0px auto 0px auto;

.transition(all 0.2s linear);
cursor: help;
i {
margin-top: 3px;
color: @header-navigation-type-color;
font-size: @h1-type-font-size;
}

width: 200px;
height: 200px;

@media (min-width: @screen-sm-min) {
width: 80px;
height: 80px;
}


@media (min-width: @screen-md-min) {
width: 110px;
height: 110px;
}

@media (min-width: @screen-lg-min) {
width: 134px;
height: 134px;
}

The important bit is here I think - color: @header-navigation-type-color;.

Does that refer to a change in the dashboard? Can this be altered here?

sorry, I am unsure if I should play with it or not.

Thanks

If you change the colour through the 'Customize' option it will change others.

You could just remove the '@header-navigation-type-color' and replace with a colour of your choice.

You could rename '@header-navigation-type-color' with something else and add it to the 'defaults.php' and 'styles.xml' so it can changed from the 'Customize' panel.

Not a major issue if you know what you're doing you can change everything within 'concrete/themes'. A lot of people would rather you copied the 'elemental' theme into the 'applications' folder and play with it there.

Thanks Steevb,

I tried removing that option and adding a colour but it changes the slider background not the hover option.
Is there not a way to add it under custom css or something under the design option?

I will do alot more searching but hopefully you know how it can be done.

Thanks for all your advice.

This is what I did to change icon colour.

1. Changed line 33 in ‘feature-template-hover-decription.less’ to: color: @feature-icon-color;

2. Added - @feature-icon-color: #1a1a1a; under // Miscellaneous in ‘defaults.less’

3. Added - ‘<style name="Feature Icon" variable="feature-icon" type="color" />’ under ‘<set name="Miscellaneous”>’ in styles.xml’.

Once ‘default’ theme is reloaded you should see ‘Feature Icon’ colour option under ‘Miscellaneous’ in the ‘Customize’ panel.

Hi Steevb.

Thanks for the help and yes it works. It changes the icon color itself but not the background. you wouldnt know how to change the background would you?

I was even able to add a -background-text option by changing line 8:
color: lighten(@feature-icon-color, 10%);

But I havent got the background of the icon changed. If not I will leave it as is.

Thank you for helping me. I appreciate the effort you have gone to.

Regards,