Icon set

[jrubenoff]

Continuing dobtco/screendoor-v2#926

In addition to what's in respondent view, I drew a bunch of icons last week.

I'm not sure how to reference them in the style guide's CSS.

I have a few more planned, but for some of our current icons (like the gear for settings), I'm not confident enough in my illustration abilities to create versions I'm happy with.

For now, we're using both our icon set and FontAwesome, but supplementing our own icon set with some third-party icons probably makes the most sense.

[ajb]

I'm not sure how to reference them in the style guide's CSS.

I'm not really sure what you mean by this? Just getting the font files to load properly when running the test server?

---

My concerns:

• Additional load time because of more HTTP requests (hence the question about using data/URI)
• Duplicate CSS (icons.scss and font awesome's CSS is probably pretty similar...)
• Developer confusion. Using a "DOBT" icon vs. a font-awesome icon should not require much change from the developer's end

[jrubenoff]

Just getting the font files to load properly when running the test server?

Yup.

We could solve all of the problems you mentioned in the short term by importing all the FontAwesome icons we currently use into the DOBT icon set, and then replacing them as we go.

[ajb]

I'd like to hold on this for a little while, since it depends on us solving a few different issues above and because I don't see any urgency to merge this in. Does that sound accurate?

[jrubenoff]

Icomoon lets us add FontAwesome icons to our existing set, letting us use one font and set of CSS classes. It's a pretty straightforward solution.

[ajb]

Sounds good, I still need time to figure out a solution for getting these icons to import properly though, which is why I'm asking to push this until after the redesign is merged.

On Mon, Jul 6, 2015 at 1:45 PM, Josh Rubenoff notifications@github.com wrote:

Icomoon lets us add FontAwesome icons to our existing set, letting us use one font and set of CSS classes. It's a pretty straightforward solution.

— Reply to this email directly or view it on GitHub https://github.com/dobtco/dvl-core/issues/107#issuecomment-118936696.

Adam Becker (951) 9-BECKER @AdamJacobBecker

[jrubenoff]

Yeah, we both agree on that. :-)

[jrubenoff]

I've had this tab open for a while.

Summary:

• Icon fonts are inaccessible to dyslexics and others who use custom font settings on their browser
• Opera Mini (350 million users) and browsers in developing countries don't download icon fonts
• Icon fonts take up a private use Unicode area that OS-level emoji can override in Safari

We need to:

• Create accessible fallbacks when a user has custom font settings in their browser
• Create accessible fallbacks when the browser doesn't support web fonts
• Make sure to test in Safari / Mobile Safari

The presentation suggests switching to SVG, but I think we can still solve these problems while using icon fonts.

[jrubenoff]

Let's figure out the tech portion of this soon. It seems like the last remaining big bottleneck to more iterative design improvements.

[ajb]

I feel like we should be relying on an open-source icon set, not making one of our own. We already have way more work than we have resources for. Why add this to our plate?

[ajb]

http://www.streamlineicons.com looks to be our best candidate right now. @jrubenoff will do mocks and we'll make a decision on whether to switch over...

[jrubenoff]

This is a cut-and-paste job from screenshots, so some of the icons are a little blurry. But hopefully you get the idea.

[ajb]

I'm fine with the icons, but all of the circled icons got a lot larger. Is there a reason for that?

[jrubenoff]

Just the way I sized them in the mocks... we can make them smaller.

[jrubenoff]

Actually, one exception: I've wanted to make the navbar icons larger for a while, but solid icons looked too heavy at large sizes.

From February:

[ajb]

I think it looks bad :/

Let's argue about this in code.

On Tue, Oct 6, 2015 at 3:25 PM, Josh Rubenoff notifications@github.com wrote:

Actually, one exception: I've wanted to make the navbar icons larger for a while, but solid icons looked too heavy at large sizes.

From February:

[image: screen shot 2015-10-06 at 12 24 49 pm] https://cloud.githubusercontent.com/assets/1328849/10319880/5323b510-6c25-11e5-95cf-14a41eafec47.png

— Reply to this email directly or view it on GitHub https://github.com/dobtco/dvl-core/issues/107#issuecomment-145971891.

Adam Becker (951) 9-BECKER @AdamJacobBecker

[ajb]

Sorry, to clarify: the iconset looks good, the super-large navbar icons look :neutral_face:

[jrubenoff]

I did a pass at a full icon set last week:

I need to be able to work with them in code before going farther. How'd you like to proceed?

Also, Icomoon's Unlimited plan offers CloudFront hosting over SSL, if you'd like to pay for that:

[ajb]

Some initial questions:

1. Any reason we need to use Icomoon, rather than a library like https://github.com/sapegin/grunt-webfont?
2. We're not adding that text to the icons, right? If so, will be hell for i18n
3. It's not blocking me, but can you post the list of icons that you compiled?

[jrubenoff]

1) Icomoon helps with pixel hinting but I'm open to trying another tool. 2) The labels were just for clarification, not part of the icon itself.

But speaking of text, we should think about using SVG sprites for accessibility. Down the line, this would let us add title and description tags to our icons. See this deck for more info.

3) Here is a partial list; I had to hand-draw some of them.

account-files
add-1
add-circle-1
align-left
angle-brackets
arrow-circle-left-6
arrow-circle-up-6
arrow-down-12
arrow-down-7
arrow-left-12
arrow-left-7
arrow-right-12
arrow-right-7
arrow-top-right
arrow-up-12
arrow-up-7
asterisk-2
bold
bookmark-add
bubble-chat-question-2
calendar-2
chat-double-bubble-1
check-1
check-circle-2
clock-2
close
cloud
cloud-check
cloud-disable
cloud-download
cloud-refresh
cloud-upload
copy-1
dollar-sign
dollar-sign-circle
email
facebook
file-new-1
file-new-2
file-upload-1
filter-2
flash-1
folder-1
globe-2
google+
graph-bar-2
group-add-2
group-global
hash
help-circle
home-1
indent-decrease-1
indent-increase-1
information-circle
italic
key-2
link-3
linkedin
list-bullets-1
list-number
location-pin-1
lock-close-1
logout-3
navigation-drawer-1
navigation-show-more-1
navigation-show-more-2
paragraph
pencil-fill
person-1
person-download-1
phone-5
picture-1
rank-army-star-1
remove-circle-1
report-problem-circle
report-problem-triangle
scale
search
strikethrough-1
subtract-1
subtract-circle-1
synchronize-3
text
twitter
undo
video-clip-2

[ajb]

I've considered using SVGs (see http://mir.aculo.us/2014/10/31/icon-fonts-vs-inline-svg/), but consistent with the majority of our technology choices, I'd rather go with a more tried-and-true method.

[jrubenoff]

It's not a less-proven technology... Grunticon's been around for three years.

But anyway, not pushing for one or the other yet. The only thing I'm asking for is a place to upload icon assets that can be referenced inside our apps, so I can start experimenting.

[ajb]

Sorry, all I meant is that it's a lot more common to use an icon font than inline SVGs. That said, I'll take a look at Grunticon and any other libs you know of. Here are my requirements:

• Ease of use in both server-rendered and client-rendered templates, without bloating the markup that gets sent over-the-wire
• Overall asset size
• Overall # of HTTP requests (this is where inline SVG might actually be :ok_hand:)
• Compatibility with our targeted browsers without hacks/shims
• Developer ease-of-use
• Ease of updating / maintaining the icon-set

I was hoping to have a MVP done tonight (but more realistically, tomorrow) so that you can play around with the icons in a more real-world scenario.

[ajb]

See the WIP here: https://github.com/dobtco/dvl-icons

I had a little trouble identifying some of the icons in your list:

• twitter, facebook, and linkedin were all prefixed with logo-
• I couldn't find information-circle
• For a couple icons (scale, filter, cloud), there was more than one choice. I chose the one that I thought looked better.

Can you make any necessary changes to the icons directory in that repo? In the meantime, I'll be figuring out how we're going to include it in dvl-core.

[ajb]

Maybe we should just discuss in-person... some of those glyphs look pretty awful. Not sure if Icomoon would give us better results, or if the only solution is to go SVG.

[ajb]

More coming shortly... looks like using the expanded SVGs might produce better results.