How do i give social icons their unique colour?

Hi there,

You'd have to use some CSS like this:

.icon-set-lsi_widget-2 .lsi-social-facebook a {
    background-color: #000 !important;
}
.icon-set-lsi_widget-2 .lsi-social-linkedin a {
    background-color: #fff !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Tried that, doesn't seem to have worked.

It should - I tested with browser inspect.

Not seeing the code being added?

Maybe it's because i added the css in the simple css plugin.

I added the code, just no difference, the colours of the facebook and linkedin are still the same.

Simple CSS should work. However, I'm not seeing anything output.

Do you have other code added in there that might have an error?

I don't think so, here is all the CSS used in the simple css plugin:

.clouds-hero {
    position: relative;
}
.clouds-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 75vh;
}
  
@media (min-width: 769px) {
    .page-hero {
        height: 100vh;
    }
}

/* Big tablet to 1200px */
@media only screen and (max-width: 1200px) {
.clouds-hero {
    position: relative;
}
.clouds-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 77vh;
}  
     
/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
.clouds-hero {
    position: relative;
}
.clouds-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 80vh;
}
    
/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
.clouds-hero {
	position: relative;
}
.clouds-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 88vh;
}  

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
.clouds-hero {
	position: relative;
}
.clouds-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 91vh;
}

.icon-set-lsi_widget-2 .lsi-social-facebook a {
    background-color: #3b5998 !important;
}

.icon-set-lsi_widget-2 .lsi-social-linkedin a {
    background-color: #0077b5 !important;
}

Each of the media queries starting from /* Big tablet to 1200px */ are missing their enclosing } so the code at the end is not executing.

Great all working! thanks guys!

Glad we could help :)

This site is good if you need to check CSS errors: https://jigsaw.w3.org/css-validator/