Would be nice to be able to insert icons found here: http://zurb.com/playground/foundation-icons

Comments

chrisjlee’s picture

chrisjlee commented

Looking to add the icons in the sass folder. Will need to provide documentation on the project page about icon support, etc. Will add this to the subtheme.

chrisjlee’s picture

chrisjlee commented
Priority: Normal » Major
alexweber’s picture

alexweber commented
Title: Support Zurb Foundation Icon » Support Zurb Foundation Icons

This might be an interesting path: https://drupal.org/project/icon

alexweber’s picture

alexweber commented

Complementing #3 and quoting from the Icon API module project page:

Bootstrap (base theme) - Provides Icon API support for the glyphicons that come bundled with the main Bootstrap framework. Use this as an example on how to integrate your theme icons.

I think we should look next door and do whatever they're doing cause it's similar enough and seems to be working fine! :)

chrisjlee’s picture

chrisjlee commented
Status: Closed (duplicate) » Active

I added an example file for others to include zurb foundicons in the megapatch. I feel this is an appropriate balanced approach.

I'm aware of the icon api. I think it's nice but overkill to use a theme function to create an icon. Instead you could just write html or create a code field. If i'm misinformed let me know; i might be wrong here.

chrisjlee’s picture

chrisjlee commented
Status: Active » Closed (duplicate)
alexweber’s picture

alexweber commented

Hang on Chris! :)

I have some partial uncommitted work integrating Icon API in a way similar than Bootstrap does... I did run into a little roadblock because Foundation uses fonts and Icon API doesn't support that yet, just single images and sprites (if I'm not mistaken)

Either way, I agree that it might be overkill and I'm willing to reconsider that approach but I think that a good compromise would be to actually implement all of the foundation icon sets and include all the icons too in the STARTER theme and just have them all commented out in custom.scss, so that it's really easy to enable them. The current approach makes users perform the same repetitive tasks to setup the icon sets every time...

chrisjlee’s picture

chrisjlee commented

Sounds good. I like that approach. Just not sure would think it's worth to maintain icon api code?

alexweber’s picture

alexweber commented

@Chris, I really don't think it is...

Actually, I just implemented this without Icon API today for a project and have a really nice, SASS-y approach, so maybe commit the other issue without this and I'll handle the icon integration in here, it's similar to what you were doing anyway! :)

alexweber’s picture

alexweber commented
Assigned: Unassigned » alexweber
alexweber’s picture

alexweber commented
Status: Active » Fixed

Ok done!

In case anyone's curious, the Zurb Foundicons ship with a SASS version of each icon set's styles so I just extracted and moved the common functionality to a "components/icons" partial and let each icon set live in its own partial but depend on the common functionality provided by that base partial.

Tested and works like a charm!

http://drupalcode.org/project/zurb-foundation.git/commit/e677159

chrisjlee’s picture

chrisjlee commented

good stuff. thanks alex!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

paskainos’s picture

paskainos commented

@alexweber: primarily concerning #11, I've been trying to use the 'general' and 'social' icon sets simultaneously on projects, and I'm seeing overlap / conflict. Specifically, when uncomment both:

  • @import "components/icons-general"; and
  • @import "components/icons-social";
  • (and @import "components/icons"; of course)

and then create, for instance:

  • <i class="foundicon-phone"></i> and
  • <i class="foundicon-facebook"></i>

the 'phone' icon is generated properly, but the 'facebook' icon is actually the 'plus' sign (#003 in general icons vs social icons). Am I missing something, or doing something wrong?

Also, since Foundation Icon Fonts 3 is out, and consolidates icon sets, would it make sense to upgrade?