A social media widget based on foundation font

Community Forums › Forums › Design Tips and Tricks › A social media widget based on foundation font

This topic is: not resolved

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  kosmiq 3 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 7, 2013 at 3:46 am #18606

    kosmiq
    Participant
    Post count: 12

    Hi all, I created a widget using the Genesis (Nathan Rice) Simple Social Icons as a base.

    Differences are that instead of using images for the icons I am using Foundations social icon font  (http://www.zurb.com/playground/foundation-icons). Advantages are it will scale and look good no matter the resolution, retina screens and so on.

    One of the less good things is that it does NOT work on IE7 and older.

    I have adapted it to be uniform with the Genesis 1.9.1 standard theme. Font-sizes and paddings are set in REM with a PX fallback, all calculated with 16px as base.

    To take a look at the Widget settings view take a look here: http://tor.raswill.se/files/2013/02/sw-settings.png

    As you can see there are options for font-size and padding.
    Font-size and padding can be set to: 1rem/16px, 1.5rem/24px, 2rem/32px, 3rem/48px, 4rem/64px

    To see it in action go here: http://rgrid.rsldev.se/ (it’s the one in the sidebar, you can ignore the one in the header, it’s hard-coded).
    I have added fields and CSS-classes (as well as colors) for the following social media sites/functions:

    rss, facebook, twitter, linkedin, google-plus, pinterest, youtube, vimeo, tumblr, github, path, dribbble, stumble-upon, behance, reddit, flickr, slideshare, picassa, skype, steam, instagram, foursquare, delicious, digg, wordpress

    If you would like to try it out, you can download it from here: https://www.dropbox.com/s/mx4uqca96qvknea/font-social-icons.zip

    Any questions, suggestions for improvements and etc. are very welcome.

    Oh and btw, just as the original widget if you do not add a URL to the social media the icon will not appear in the widget.

    • This topic was modified 3 months, 2 weeks ago by  kosmiq.
    • This topic was modified 3 months, 2 weeks ago by  kosmiq.
    • This topic was modified 3 months, 2 weeks ago by  kosmiq.
    • This topic was modified 3 months, 2 weeks ago by  kosmiq.
    • This topic was modified 3 months, 2 weeks ago by  kosmiq.
    • This topic was modified 3 months, 2 weeks ago by  kosmiq.
    • This topic was modified 3 months, 2 weeks ago by  kosmiq.
    • This topic was modified 3 months, 2 weeks ago by  kosmiq.
    February 8, 2013 at 5:27 pm #19113

    jay.gardner
    Member
    Post count: 1

    This reply has been marked as private.

    February 11, 2013 at 3:42 am #19558

    kosmiq
    Participant
    Post count: 12

    Hi, sorry for the late response. Please start by downloading the widget/plugin again. I have updated it with proper IE7 support and a few more settings.

    Could you then place it and activate it and point me to where it should show up?

    Edit:

    I have tested it both in the header and the footer on my showpage linked in the post and it does work.

    February 11, 2013 at 3:50 am #19559

    kosmiq
    Participant
    Post count: 12

    I took a quick look again at your page, I can see the css-file in your <head> but can not find anything related to the widget?

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.