RSS social icon #190

Closed
rmorabia opened this Issue Apr 24, 2015 · 6 comments

Projects

None yet

3 participants

@rmorabia

I just added RSS to my social menu, and it shows up as a star:

2015-04-24 13_37_44-radhika morabia digital marketing strategist specializing in conversion rate

I took a look at the code and saw that Genericons is the CSS behind the social icons. Genericons has an RSS icon, so why doesn't the site recognize that?

@patrickcoombe

Hi there :) Seeing the same thing, I'm sure you can just switch out the code Raam will probably know where it is buried within the theme files.

@raamdev
Owner
raamdev commented Apr 27, 2015

If you look in style.css, you'll see a section that defines the various icons along with URL patterns that should match a particular icon (search style.css for "Social menu styles").

There are lots of supported patterns already, e.g., twitter.com, facebook.com, mailto:, etc., however not everything is there. :-) I agree that RSS should be there, so I'll add the following to the next release of the theme:

#menu-social li a[href*="/feed"]::before {
    content: '\f413';
    color: #BBC7D3;
}

#menu-social li a[href*="/feed"]:hover::before {
    transition: color ease 0.3s;
    color: #4A4A4E;
}

For now, you can add that to your Child Theme's style.css file (or use Jetpack's Custom CSS module). Also, if your feed address does not contain /feed you'll want to tweak the pattern part of the CSS so that it matches whatever URL you put in the Social Menu for your RSS feed.

@raamdev
Owner
raamdev commented Apr 27, 2015

Next release changelog:

  • Enhancement: Added RSS Icon support to Social Menu. You can now add menu items to the Social Menu that have URLs containing /feed and those will show the RSS Icon. See Issue #190.
@raamdev raamdev closed this Apr 27, 2015
@rmorabia

Quick question... How can we individually add a trigger for a Genericon? (eg. RSS comes up with /feed.) I'd like to do some custom icons, but nothing that should be universally added.

@raamdev
Owner
raamdev commented May 20, 2015

@rmorabia You can see the code I added for the /feed icon and use the same technique to create your own custom URL matches (I suggest adding those to a Child Theme style.css file).

For example, maybe any URLs in the Social Menu that contain href*="rmorabia.com" show a special icon for yourself. See: 0cf5e77

Note that the CSS content: attribute can point to a URL (e.g., content: url(http://example.com/rmorabia.jpg)). See this article for more examples.

@rmorabia

Thanks, Raam! Got it.

On May 20, 2015 9:06:39 AM PDT, Raam Dev notifications@github.com wrote:

@rmorabia You can see the code I added for the /feed icon and use the
same technique to create your own custom URL matches (I suggest adding
those to a Child Theme style.css file).

For example, maybe any URLs in the Social Menu that contain
href*="rmorabia.com" show a special icon for yourself. See:
0cf5e77

Note that the CSS content: attribute can point to a URL (e.g.,
content: url(http://example.com/rmorabia.jpg)). See this
article
for more
examples.


Reply to this email directly or view it on GitHub:
#190 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment