Elemental - change awesome font feature colors

Hi guys,

I am trying to get the awesome fonts color changed to help me highlight certain items. But it seems to inherit the background colour meaning I had to add grey to the background which doesnt look great.

Is there a way to change the feature awesome fot color or even at least just the icon itself?

Any help is appreciated.


View Replies:
MrKDilkington replied on at Permalink Reply
Hi itmaintainers,

Which Font Awesome icons are you trying to change?
itmaintainers replied on at Permalink Reply

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.

Steevb replied on at Permalink Reply
Find which css line is giving the icon it's colour and change it?
itmaintainers replied on at Permalink Reply

Where do I look for the lines?
Steevb replied on at Permalink Reply
Look in: concrete/themes/elemental/css/build/blocks/feature-template-hover-description.less

Then look at 'div.ccm-block-feature-item-hover-icon'
itmaintainers replied on at Permalink Reply
Thanks replying Steve.

The code there is :
div.ccm-block-feature-item-hover-icon {
border: 1px solid lighten(@body-type-color, 40%);
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.

Steevb replied on at Permalink Reply
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.
itmaintainers replied on at Permalink Reply
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.
Steevb replied on at Permalink Reply
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.
itmaintainers replied on at Permalink Reply
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.