Add color to the social icons render

[Info 3bits]

Add color as a 4th parameter in the social icons list.

Adding a hover color would be a must

[Jeremy Hopkins]

Is this to allow each icon a different color or just to give more control over the colors than there is currently but keep all icons hte same color?

[Info 3bits]

The idea is to add the real colour to the icon.

See http://www.materialui.co/socialcolors

The item list should be: http://facebook.com/|Facebook|fa-facebook-square|#3b5999

And a plus would be to add the hover color: http://facebook.com/|Facebook|fa-facebook-square|#3b5999|#e5e5e5

Or if you want all the icons using the same colour then: http://facebook.com/|Facebook|fa-facebook-square|#e0e0e0|#e5e5e5

[Jeremy Hopkins]

I am not sure how well this would work in practice with the background colors?

I think technically this will be easy to do so the best thing is probably to add the feature and see where it goes from there.

[Info 3bits]

If your background is black, you can select white for all the icons and grey for hover.

If the background is white you can select black or its colour and any other for hover.

The solution is good and I think easy to add.

There are some Joomla modules using this option and work great.

[Jeremy Hopkins]

I tried that but there is paadding which also gets colored with the gb and does not look too good:

[Info 3bits]

This is my proposal to an user request in the moodle forum

.fa-facebook-square::before{
    color: #3b5998;
}

[Usman Asar]

I think white icons keeps the professional look intact, plenty of high profile sites i have seen are making use of uniform colored social icons.

[Jeremy Hopkins]

Hi Usman,

I will do this so that the current parameters still work and render whatever color is in the theme settings. If a color is added in the strings for the social links then it will override that color, so, if you dont want to use this feature it will do exactly what it does currently, at least that is the plan!

[Info 3bits]

The proposal is add the colour in the item list and then use this colour to display the icons. If you want to display all the icons in white colour just add #ffffff to all the items. If you want red, then add #ff0000. Doesn't matter the background, the icons always will match the main colours.

I think that we can control any request using this solution.

[Usman Asar]

Even better, uniformity with added functionality of customization, as people may be using White Header, so changing color matching their top header or footer gives more customization options.