Twenty Seventeen: Replace remaining Genericons with Font Awesome icons

[melchoyce]

I noticed all of the arrows are still using Genericons. Let's replace those with Font Awesome arrows.

We can replace the chevrons with FA's angle set.

The previous/next icons we'll want to experiment with to see which looks better: FA's arrows, long arrows, or carets.

[sami.keijonen]

Here are Genericons used and why.

• expand: no similar icon in FA.
• next: no similar icon in FA but plenty of arrows to chooce.
• previous: no similar icon in FA but plenty of arrows to chooce.
• pinned: no similar icon in FA.
• path: no icon in FA.
• polldaddy: no icon in FA.

[melchoyce]

Replying to sami.keijonen:

Here are Genericons used and why.

• expand: no similar icon in FA.

See above suggestions.

• next: no similar icon in FA but plenty of arrows to chooce.

See above suggestions.

• previous: no similar icon in FA but plenty of arrows to chooce.

See above suggestions.

• pinned: no similar icon in FA.

We can use ​http://fontawesome.io/icon/thumb-tack/. (Sorry @davidakennedy, I know you just tweaked the sizing for this icon! Didn't realize it was still a Genericon.)

• path: no icon in FA.
• polldaddy: no icon in FA.

Let's remove these. I don't know if either really makes sense in a social menu anyway — I don't think either have public profiles.

[sami.keijonen]

Do you want me to create patch for this?

I'm not familiar how commiting to Core works so any tutorials would be helpful.

[sami.keijonen]

I have a patch coming up. At least I think so:)

[sami.keijonen]

Not sure if I did this right but there is a patch file for test.

I used arrow-left and arrow-right. They seem a little thick so we might need to try long arrows or carets.

[melchoyce]

Replying to sami.keijonen:

Not sure if I did this right but there is a patch file for test.

Your patch is good, thanks. :)

I used arrow-left and arrow-right. They seem a little thick so we might need to try long arrows or carets.

I agree. Might also need to adjust the size of the icons, based on how they look. Would you mind trying out long arrows and carets and add some screenshots before uploading a patch?

The angles might also need some slight tweaking to vertically align them with the text — right now the down angle on menus should probably be top: -1px; instead of -2px.

Thumbtack looks perfect :)

Thanks for continuing to work on this!

[sami.keijonen]

Would you mind trying out long arrows and carets and add some screenshots before uploading a patch?

Sure. I'll test them both.

The angles might also need some slight tweaking to vertically align them with the text — right now the down angle on menus should probably be top: -1px; instead of -2px

Ok, I'll check that too.

[sami.keijonen]

Here are two screenshots of long arrows. Looks kind of strange.

​https://www.dropbox.com/s/h61ktwi7bkj85tf/Screenshot%202016-10-26%2022.33.17.png?dl=0

​https://www.dropbox.com/s/1hspwwamurec4i9/Screenshot%202016-10-26%2022.36.11.png?dl=0

Here are two screenshots of carets. Looks a little bit better.

​https://www.dropbox.com/s/9idjnhwc48s9ykc/Screenshot%202016-10-26%2022.39.59.png?dl=0

​https://www.dropbox.com/s/zxk7aqm37wodg46/Screenshot%202016-10-26%2022.38.57.png?dl=0

[melchoyce]

Neither's super ideal. I'm going to make some custom arrows using Font Awesome as a base to use instead. Can get that done today. Thanks @sami.keijonen!

[sami.keijonen]

Sounds good!

Let me know where I can download arrow SVGs when you have time to create them.

It's bed time here in Finland but I can continue tomorrow.

[melchoyce]

Thanks! I'll post a link to download the new SVGs in this ticket. Have a good night :)

[melchoyce]

Let's try these SVGs: ​https://cloudup.com/cjUkmNNKlFM

Let me know if they're weird or broken. The size might also need to be adjusted to fit better.

[sami.keijonen]

Here is second patch with new arrow icons. I only used left and right arrows and adjusted the sizes a little bit. But I run out of time so they still might need some style details.

[laurelfulford]

@sami.keijonen, your patch is really solid! I made a couple tiny changes in 38488.2.patch​ based on reviewing with @melchoyce:

• Moved the 'scroll down' arrow up a little bit.
• Renamed the two new arrow icons for consistency - they originally had 'twentyseventeen' in the name, which was carried over from the Illustrator files.

[sami.keijonen]

Nice!

Let me know if you need more help.

[davidakennedy]

Removes code from other patch.

[davidakennedy]

@laurelfulford Looks like your patch had some code in it from a patch for #38395. 38488.3.patch​ removes that. However, the fallback for IE 8 is not working. It needs a bit more work. :)

[laurelfulford]

Ah geeze - thanks @davidakennedy, and sorry about that! I'll look into the IE8 issue.

[laurelfulford]

Adds fix for missing SVG fallback in IE8.

[laurelfulford]

Looks like a couple classes were not updated to match the new icon names in the SVG fallback styles in style.css. 38488.4.patch​ adds an update for that.

[davidakennedy]

In 39072:

Twenty Seventeen: Replace remaining Genericons with Font Awesome icons

• Replaces: icon-pinned with icon-thumb-tack
• Replaces: icon-next with icon-arrow-right
• Replaces: icon-previous with icon-arrow-left
• Replaces: icon-expand with icon-angle-down
• Removes: Path, Polldaddy

Props sami.keijonen, melchoyce, laurelfulford.

Fixes #38488.