Healing Touch Pro social icon glitch

[Robert Jones]

I Put the social icons in foot 1 columb and they all showed up fine. But when I attempted to change one to facebook it was a small white box with no F inside it.
I wanted to add instagram, facebook and Yelp icons. At first I thought maybe the theme does not have the icons but I think it does.
Below is the icon code in the footer section of the theme.

[space height=”20″][social_area] [social icon=”facebook” link=”#”] [social icon=”twitter” link=”#”] [social icon=”instagram” link=”#”] [social icon=”linkedin” link=”#”] [social icon=”pinterest” link=”#”] [/social_area]</h6>

Then I added the css line in custom CSS area of the theme.
.social-icons .fa-facebook::before {
content: “\f09a” !important;
}

When I pasted it, the live view of the page did show the F for facebook. But as soon as I clicked publish, the F turned into to f09a on the visual display.

See image below

[Sonl Sinha]

Hi,

Kindly show us your website URL please?

Regards,
Brad

[Robert Jones]

https://jonesvision.rocks/

Both header and footer are effected. It just does not like like facebook, others work.

When I type

[social icon=”facebook” link=”#”]

Where does the theme look for the icon? It has to be a file someplace. Where are those files stored? If I look at the site with a File manager or command prompt is there a directory or place where one could swap out image files?

What if I wanted icon=facebook” to show a picture of a pumpkin? I feel to far removed from what is going on under the hood. So when something breaks not sure where to look to fix it.

Thanks

[Robert Jones]

Hmm I guess i did not put the link to the site

Here it is

https:\\jonesvision.rocks

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.fa.fa-facebook {
    font-family: "Font Awesome 5 Brands" !important;
}

Regards,
Brad

[Robert Jones]

Thanks Brad.

Do you have a cheat sheet on more icon tricks?

How would I have known that for that icon to display I would need to put that line?

.fa.fa-facebook {
font-family: “Font Awesome 5 Brands” !important;
}

[Sonl Sinha]

Hi,

You can use that CSS code.

Regards,
Brad

[Author]

Posts