Add WordPress Genericon to Twenty Fifteen Social Bar

staff-happychia · Staff · Dec 15, 2014 at 9:17 am
Copy link

Add topic to favorites
I’d like to display WordPress genericon linked to my self-hosted WordPress in the social bar of my WordPress.com blog using Twenty Fifteen theme?

I tried the following CSS unsuccessfully:
```
media="all"
.social-navigation a[href*="chaitanyamsv.com"]:before {
	content: "\f205";
}
```
and
```
media="all"
.social-navigation a:before {
content: "\f205";
}
```
Can someone help me with the CSS. Thank you.

The blog I need help with is: (visible only to logged in users)
galois · Member · Dec 15, 2014 at 10:25 am
Copy link
Hi @staff-happychia
Twenty Fifteen theme has a social icons menu. Did you know?
See the Available icons section:
http://theme.wordpress.com/themes/twentyfifteen/
staff-happychia · Staff · Dec 15, 2014 at 10:33 am
Copy link
Thanks for your response.

I would like to know how to display WordPress genericon that links to my self-hosted blog.
galois · Member · Dec 15, 2014 at 10:48 am
Copy link
Go to Appearance-> Menus-> Social links menu
Create a link to self-hosted blog and save the menu.

Look at the two icons (WordPress & YouTube) that just created in a test blog:
staff-happychia · Staff · Dec 15, 2014 at 11:06 am
Copy link
Interesting.

I get a generic link icon instead of WordPress icon as you can see on my blog, next to Flickr icon. Here is what I have in my custom menu: https://cloudup.com/cOJNYlHD5Rt

Unsure where am I missing.
thesacredpath · Member · Dec 15, 2014 at 5:22 pm
Copy link
@staff-happychia, the theme will pick up and use the appropriate icons for the social media services, but I think we will have to add the WordPress logo to it manually via CSS by targeting that particular menu item by the menu item id class. Add this to your CSS.
```
.menu-item-336 a:before {
    content: '\f205';
}
```
staff-happychia · Staff · Dec 15, 2014 at 7:22 pm
Copy link
Worked perfectly! Thank you, thesacredpath. :-)
thesacredpath · Member · Dec 15, 2014 at 10:28 pm
Copy link
You are welcome.
staff-happychia · Staff · Dec 15, 2014 at 10:45 pm
Copy link
I just want to confirm there is no non-CSS way to get the WordPress genericon displayed for self-hosted blogs and WordPress.com blogs using custom domains.

This seems to be not a problem for *.WordPress.com blogs.

Wish the otherwise awesome Twenty Fifteen theme supported this without having to use custom CSS.
galois · Member · Dec 15, 2014 at 11:56 pm
Copy link
In my test blog I did it without CSS…
thesacredpath · Member · Dec 15, 2014 at 11:58 pm
Copy link
@galois, what were you using for a URL? If you were using http://wordpress.com/ or some variant of that, then it would likely pull up the WordPress icon automatically.
staff-happychia · Staff · Dec 15, 2014 at 11:59 pm
Copy link
Thanks for the response galois.

I am dying to know how you did it.
galois · Member · Dec 16, 2014 at 12:03 am
Copy link
Perfect, thanks for the clarification Richard. :)

(My test blog–>http://pruebasmenues.wordpress.com/ )
galois · Member · Dec 16, 2014 at 12:06 am
Copy link
I am dying to know how you did it.

Reading the Twenty Fifteen documentation & using the Social links menu.
staff-happychia · Staff · Dec 16, 2014 at 12:23 am
Copy link
Your test blog is private. Could you let me see it?
staff-happychia · Staff · Dec 16, 2014 at 12:27 am
Copy link
Or do you mean, you linked your test blog–>http://pruebasmenues.wordpress.com/ in the custom menu item to display WP icon?
galois · Member · Dec 16, 2014 at 12:42 am
Copy link
Your test blog is private. Could you let me see it?

Done. It’s public.
staff-happychia · Staff · Dec 16, 2014 at 1:23 am
Copy link
The WP icon on your test blog links to WordPress.org.

But my question was how to display WP genericon that links to a self-hosted blog, without using CSS.

I am sure most users want to link to their own blogs (like chaitanyamsv.com) , not to WP.org or WP.com in which case, without CSS, Twenty Fifteen displays generic link icon.
galois · Member · Dec 16, 2014 at 2:02 am
Copy link
The WP icon on your test blog links to WordPress.org.

But my question was how to display WP genericon that links to a self-hosted blog, without using CSS.

Ok, understood.

in which case, without CSS, Twenty Fifteen displays generic link icon.

Yes, you’re right. I regret not having been more helpful. :(
staff-happychia · Staff · Dec 16, 2014 at 2:10 am
Copy link
Hey galois, no worries.

I am just making sure I did not miss anything. Appreciate your patience in responding to me so far. Cheers. :-)

No items found.