Social Icons Changes

[kffaner]

The current social icons that appear at the top of the front page are very difficult to notice, the font awesome facebook icon is not visible and is uncommon to use that kind (a lower “f” letter…). I want to change it to the default facebook icon, could you help me on how i can do that? there were no option for it that i could fine in admin panel and i could not find the icon source in the files. thanks.

[Kieran_SQ]

Hi,

I am going to ask one of our developers look into this for you as I cannot seem to identify the fix. They’ll be in touch on Monday or Tuesday to discuss this with you.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Radu]

Hi,

You can choose another icon by following this guide: https://archived.seventhqueen.com/kleo/article/use-custom-fontello-icons-kleo-theme

and then you will have to add this selector

COPY CODE

.icon-facebook:before {
    content: '\e94e';
}

And replace \e94e with your new Facebook icon code.

If you want a nonfontello icon tell me

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[kffaner]

weird, i followed the steps and it worked in customizer view but when i saved it shows the code “f230” instead of the icon. You can see it live on my website the issue. Bibleandprayers.com

[Radu]

Hi,

All good but you have forgotten to add the \ before the code f230

COPY CODE

.icon-facebook:before {
    content: '\f230';
    font-size: 20px;
    color: #4266b2;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[kffaner]

I dont know why but this is only happening on this theme:

Every time i hit “save and publish” the code changes… it keeps reverting it back or removing the quotation marks and causing the code not to work, i mean wth? lol can you help me figure out wth is happening here? thanks.

[kffaner]

I added the following code:

.icon-facebook:before {
content: “\f082”;
font-size: 20px;
color: #4266b2;
}

and after i hit savd and publish, it changes the code to this:

.icon-facebook:before {
content: f082;
font-size: 20px;
color: #4266b2;
}

[Radu]

Hi,

On my local install that not happens when I paste this to quick css area from theme options

Paste again the code but from here: https://pastebin.com/raw/zcfF6syU

From what I see there are used some wired quotes, see screenshot

Try to copy the code from Pastebin, if it’s still the same paste the code in wp-content/themes/kleo-child/style.css from the pastebin link.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[kffaner]

ok i figured one of the plugins was overwriting this code, for whatever reason, so i am using this plugin to do the css changes, and it seems that it is reading the code properly now, however, instead of the icon that it is supposed to show now it shows this weird empty square. Im assuming it is not picking up the icon, you can see it on my website live. Any suggestions?

[Radu]

Hi,

Wired, looks like the icon code missing in fontello files… try to re-do this: https://archived.seventhqueen.com/kleo/article/use-custom-fontello-icons-kleo-theme worked before.. try to re-save the theme options, empty all caches, minified resources etc.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[kffaner]

lmao we are just moving in circles, now its doing the same thing as before where when i save the changes it removes the “\” before the code, making it error out and simply display the content of “f082” XD any clue whats going on here? why would the system change the code lmao?

[kffaner]

if you can direct me to where that icon is hardcoded maybe it would be easier just to change the icon in the code itself rather than play with css, as it seems the css for whatever reason keeps changing every time i update it by removing the “\” and causing the code to be invalid.

[kffaner]

ok i did some investigating and the following code works, although it still removes the \ after each saving which is if i want to add some more css to the file, i need to make sure to re-attach the \ to this code before saving for it to work. Do you have any idea why the system keeps removing it?

.icon-facebook {
position:absolute;
}
.icon-facebook:before {
content: “\f082”;
font-size: 20px;
font-family: FontAwesome;
color: #4266b2;
position:relative;
}

[Radu]

Hi,

All good now right ?

No ideea why exactly, but pay always attention to the ” “” to be the same and not wrong encoded like those “ or ”

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts