New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing icons for social links #98

Closed
silverhook opened this Issue Dec 24, 2013 · 11 comments

Comments

Projects
None yet
4 participants
@silverhook
Copy link
Member

silverhook commented Dec 24, 2013

I have added the following to the pelicanconf.py:

# Social widget
SOCIAL = (
    ('gitorious', 'https://gitorious.org/~hook'),
    ('github', 'https://github.com/silverhook'),
    ('friendica', 'https://friendica.free-beer.ch/profile/hook'),
)

but in the Social widget I can only see the icon for GitHub. The other two are just blank space (of appropriate size though). That's neither pretty nor practical.

As I understand the idea is to have the all the social links as gray icons. Would it be possible as a fallback to use the favicons of those webpages and apply a gray filter with JS/CSS over them?

@talha131

This comment has been minimized.

Copy link
Member

talha131 commented Dec 25, 2013

Related to #52.

Elegant uses Font Awesome icons for Social links. Each social site name should be picked from there minus the fa- part.

So fa-linkedin will become linkedin and so on.

Font Awesome doesn't have icons for gitorious and friendica.

Would it be possible as a fallback to use the favicons of those webpages and apply a gray filter with JS/CSS over them?

😱 That will require writing a new plugin. It is out of scope of the theme.

As I understand the idea is to have the all the social links as gray icons.

I have an idea. I want to change the color from gray to their fav icon color on hover. I will explore it after January 1st.

@silverhook

This comment has been minimized.

Copy link
Member Author

silverhook commented Dec 25, 2013

Ah, thanks for explaining.

Maybe until then, we could use the generic external link icon for a fallback.

http://fortawesome.github.io/Font-Awesome/icon/external-link-square/

@talha131

This comment has been minimized.

Copy link
Member

talha131 commented Dec 25, 2013

Good find! We should use it.

@talha131

This comment has been minimized.

Copy link
Member

talha131 commented Jan 12, 2014

@silverhook I have looked into your suggestion. I have found two issues that I didn't realize when I made the above post.

  1. There is no easy way to figure out which icon is available and which isn't and therefore fallback to external-link-square. I can add some checks in the template but FontAwesome is expanding. So with their each new release we will have up to update the check in Elegant. I don't think we should couple Elegant with FontAwesome release cycle.
  2. External Link Square isn't used for social profiles. People associate it with a link that opens an external site.

I toyed with an idea of adding a third element in the SOCIAL tuple.

(social site name, site address, fontawesome class)

But this is inconsistent with other Pelican themes.

I looked for ways to specify fallback CSS class. So that if an icon is missing, theme falls back to some other default icon. I couldn't find anything on it.

I guess best way is to submit requests for the required icons to FontAwesome project.

I am open to suggestions.

@silverhook

This comment has been minimized.

Copy link
Member Author

silverhook commented Jan 13, 2014

Naaah, that’s fine.

It’s probably enough if you just mention the fall back icon in the documentation.

@talha131

This comment has been minimized.

Copy link
Member

talha131 commented Jan 15, 2014

I will mention it in the documentation.

@silverhook

This comment has been minimized.

Copy link
Member Author

silverhook commented Jan 15, 2014

When you do, feel free to close this issue 😸

@talha131 talha131 closed this in 0ec5ccb Jan 20, 2014

@talha131 talha131 reopened this Jan 20, 2014

@talha131

This comment has been minimized.

Copy link
Member

talha131 commented Jan 20, 2014

@silverhook, Brian Blais shared a useful tip via email. With its help, this issue is fixed now.

The tuple in SOCIAL list should be in this format

(name, link, icon_name)

icon_name is optional, so users whose SOCIAL is consistent with Pelican's recommendation, they too can use Elegant without a hitch.

(name, link)
@silverhook

This comment has been minimized.

Copy link
Member Author

silverhook commented Jan 22, 2014

Cool ☺

@talha131 talha131 closed this Mar 17, 2014

@shangsunset

This comment has been minimized.

Copy link

shangsunset commented Aug 16, 2014

Hi,

I have my social links like this:

SOCIAL = (
        ('Twitter', 'http://twitter.com/shangsunset'),
        ('Github', 'http://github.com/shangsunset'),
          )

but none of them is showing up.
what could be the problem here?

@waywardmonkeys

This comment has been minimized.

Copy link

waywardmonkeys commented Sep 3, 2014

@shangsunset This might be a CORS issue. That seems to be what I'm seeing occasionally.

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