[BBadminParticipant]

Hi,

I want social media icons (facebook/twitter/instagram/g+) to be included as a widget so I can use them in different places when needed. Right now I want them in my footer 4 AND have them in colors/standard icon look for those specific medias. Is it possible with xTheme?

Looking at the customizer I can only add them in a couple of specific places and they appear in black & white. May be I am looking at the wrong place?

I have just tried Jetpack social media icons (see my footer 4) BUT jetpack is using Genericons and it looks like it is not compatible with xTheme. Have you had users mentioning this before? I could not find anything in the forum.

Happy to use whatever best way to have what I want “fixing” one of the 2 options above.

What is the best way to do this?

Thank you

Val

FYI – here is jetpack support answer to my question about why their icons are “showing weirdly”:
Genericons are what we use for our icon font: http://genericons.com/
As with any good font, the characters are registered and shouldn’t be conflicting, so when you call for Facebook’s logo from Genericons, either Facebook’s logo from Genericons will load, or nothing will because Genericons isn’t available.It looks like whatever font icon your theme is providing (or it could be another plugin) is conflicting with Genericon’s registered unicode characters, so that when the logo for Facebook from Genericons is requested, that other logo is appearing instead.
Imagine typing an H in Helvetica, but a T in Times New Roman appears instead.
So, the first thing to figure out is where that conflicting font is coming from. I’d start with the theme by temporarily switching to Twenty Fifteen. If the right icons appear, then your theme is to blame for providing the icon font that’s creeping into Genericon’s character space.
If that made no difference, try deactivating all plugins except Jetpack. If that resolves the issue, reactivate each one individually until you find the cause.”

[BBadminParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in!

You can add the X social icons in your header, sidebar or footer widget area by adding a shortcode inside a text widget. Please insert a text widget first and use this shortcode to display the social icons.

[x_share facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true"]

Jetpack icons should be working in X with no issue at all. Upon checking your site, we are seeing it in the footer.

Hope this helps. Kindly let us know.

[BBadminParticipant]

Hi,

Thank you for your answer, unfortunately it does not answer to what I am looking for. Sorry if i didn’t explain properly.

I am NOT looking to have the share icons. I want the social icons that will link to our social media pages:
facebook icon link should link to: https://www.facebook.com/BriskBars
twitter: https://twitter.com/_BriskBars
instagram: https://instagram.com/briskbars/

yes there are Jetpack icons in the footer but they are not the right icons as you can see…For instance, the first one is linking to our facebook page and shows as some sort of AS drawing…jetpack socials are supposed to look like this : https://jetpack.me/support/extra-sidebar-widgets/social-media-icons/

what do I need to do?
thank you for your help

Val

[RadModerator]

Hi Val,

Let say you prefer jetpack, then add this css at your child theme’s style.css

.genericon-facebook:before {
    content: "\f082" !important;
}
.genericon-twitter:before {
    content: "\f099" !important;
}
.genericon-instagram:before {
    content: "\f16d" !important;
}

X theme uses icon codes from here http://fortawesome.github.io/Font-Awesome/cheatsheet/

Cheers!

[BBadminParticipant]

Hi,

I have tried you code but it does not work. “\f082” just shows f082 instead of the fb icon.
Looking at your link/cheatsheet I have tried using the full [] for twitter, As you can see we are back to the previous strange looking icon image.

another solution?

Thank you

[RadModerator]

Hi there,

It’s because it’s added at customizer’s custom css, and wordpress is stripping all back slash(eg. \ ) on data that are being saved on database. Please add it on child theme’s style.css as suggested above.

Thanks.

[BBadminParticipant]

Hi,

only getting to do this now.

I copied the above mentioned code into dashboard>appearance>edit css>CSS Stylesheet Editor
only twitter changes, see “connect with us” on homepage
http://www.briskbars.com

Am i doing something wrong?

thank you

Valerie

[BBadminParticipant]

sorry, forget about my latest question- i had the code in the customizer and it messed it up.

[FriechModerator]

Hi Valerie,

Please add the code on the child theme’s style.css, like the advice above. Also please remove this on your style.css

<Head><META NAME="Description" CONTENT="BriskBars a tasty, healthy snack bar that gives you a boost, without added artificial ingredients."></Head>

That is not an CSS code.

The icons shows though, please clarify.

Thanks!

[BBadminParticipant]

Hi,

I did add the code to dashboard>appearance>edit css>CSS Stylesheet Editor. Is that not the child’s theme?

I do not get how to take “<Head><META NAME=”Description” CONTENT=”BriskBars a tasty, healthy snack bar that gives you a boost, without added artificial ingredients.”></Head>” out as when I go to dashboard>appearance>edit css>style sheet, it is not there.

to your last point: Jetpack team got back to me and we changed the layout

thank you

[RadModerator]

Hi there,

Child theme’s style.css are for css only, you should not add HTML code.

It’s here http://www.briskbars.com/wp-content/themes/x-child/style.css?ver=4.0.1

It’s best to edit it through FTP, admin editor could be showing a cache copy of your old css.

Cheers!

[Author]

Posts