Missing icons for social links

[silverhook]

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]

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]

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]

Good find! We should use it.

[talha131]

@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]

Naaah, that’s fine.

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

[talha131]

I will mention it in the documentation.

[silverhook]

When you do, feel free to close this issue 😸

[talha131]

@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]

Cool ☺

[shangsunset]

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]

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