social media icon images and color of hearts/thumbs

Hi there,

I can’t access you website – it’s throwing a blank page. Social media icons are Font Awesome icons and therefore they can be styled with custom CSS. As for the stars/hearts/thumbs color, you should be able to change it in the customize section as well as with custom CSS.

Let me know when your website is online and I’ll give you CSS snippets to apply style to these elements.

Blaz

Hi Blaz, thank you for your answer.

I have deactivated the coming soon plugin so you can take a look.

Yes, please provide me with the css code for the social media icons I will be using Facebook and Twitter. Also, I’ve tried changing the colors for the stars, but the attempt was unsuccessful..If you could me the exact location of how to change that, would be great!

Thank you so much,
David

• This reply was modified 5 years, 11 months ago by funstuff22.
• This reply was modified 5 years, 11 months ago by funstuff22.

I had a quick look and the social icons don’t seem to be there. Did you insert the urls in the settings and cleared cache after saving? As for the colors you are missing the hashtags: insert #add8e6 instead of add8e6. Try doing this first. I’ll check out more thoroughly tomorrow if there are any other issues.

Blaz

Thank you Blaz for your assistance.

I have inserted the urls in the settings and cleared cache. I have also changed the colors.

I still need to add the FB and TWitter social icons, and also increase the size of the blank feedback field that comes after a needing improvement response.. Maybe make it as big (wide) as this reply field?

Please let me know when you’re back online so I can disable the coming soon page..

Thanks again!
David

Hi David,

here are some snippets that will help you style the plugin:

.rmp-social-view .social-icons .rmp-social-icon {
    padding: 20px;
    font-size: 30px; /*size of icon*/
    width: 70px; /*width of background*/
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%; /*set to 0 for square*/
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*Facebook Icon*/
.fa-facebook.rmp-social-icon {
    background: #3B5998; /*background color*/
    color: white; /*icon color*/
}

/*Twitter Icon*/
.fa-twitter.rmp-social-icon {
    background: #55ACEE;
    color: white;
}

/*Feedback input field*/
.rmp-text-area {
    width: 100%; /*Width*/
}

If you need further assistance I can look at it after 5pm GMT.

Hello Blaz,

I have used the css codes, added them into the additional css field that came with the grand magazine template, and so the input field has increased in size, however the social icons have not appeared at all…

Are you online? I meant to show you,but I was unable to upload the screenshot that i’ve taken.

I look forward to hearing back from you.
Thank you
David

• This reply was modified 5 years, 10 months ago by funstuff22.

I uploaded the screenshot on imgbb.com : https://ibb.co/pK6yNJX

David, make you website accessible so I can have a look ??

Otherwise, this seems like your theme’s css or other plugin interfering with the plugin’s css. You can read more about possible solutions here – https://stackoverflow.com/questions/14366158/font-awesome-not-working-icons-showing-as-squares/29508384

• This reply was modified 5 years, 10 months ago by Blaz K..

Sorry about the delay, please take a look.

It seems that you are overriding FontAwesome with custom css here https://davidoffduty.com/?custom-css=88de6e32ee

a {
    font-family: "Proxima Nova",-apple-system,system-ui,system-ui,"Segoe UI",Roboto,"Helvetica Neue",helvetica,Arial,arial,sans-serif!important;
}

If you remove !important, the social icons should work. Or if you add:

a.fa.rmp-social-icon {
    font-family: FontAwesome!important;
}

I hope this solved you problems ??

I have added that css and it finally worked. Thank you Blaz, and have a happy new year! ??

Are you a web developer?

Yes I am ?? Good to hear we resolved the issues ?? Happy new year to you too ??

Marking this as resolved ??