• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

A social media widget based on foundation font

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: social media, social media icons, widget

  • This topic has 3 replies, 2 voices, and was last updated 12 years, 3 months ago by kosmiq.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 7, 2013 at 3:46 am #18606
    kosmiq
    Member

    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.

    February 8, 2013 at 5:27 pm #19113
    jay.gardner
    Member
    This reply has been marked as private.
    February 11, 2013 at 3:42 am #19558
    kosmiq
    Member

    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
    Member

    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)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble