Social Badges

Base Foundry stack

Add stylish social networking badges to your page that allow you to link directly to your various social sites such as Twitter, Facebook, LinkedIn and more.

  • Choose from over 90 different social icons
  • Set badge size
  • Choose a badge shape
  • Set corner rounding
  • Align badges differently at each breakpoint
  • Set spacing between badges
  • Style using presets or custom color pickers
  • Set icon size seprately
  • Configure button alignment
  • Drag and drop button ordering
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

Using Social Badges

Social Badges

Badge Size
Allows you to configure the size of your badges. The size is applied to all badges within your Social Badges stack.

Icon Size
Sets the size of the icon inside of the Social Badge.

Alignment
Allows you to set the justification of your Social Badges. You can set their alignment to Left, Center or Right.

Starting with Foundry v2 you're able to align the social badges differently at each of the three responsive breakpoints. v2

Badge Shape
Allows you to choose whether you'd like the badge to be squared off or rounded.

Custom Corners
The Social Badges stack uses Foundry’s default corners border radius. If you enable the Custom Corners feature you can define your own setting for the corner roundedness.

Spacing
Lets you adjust how far apart the social badges are placed.

Child Stack

Badge

Icon
Choose from a variety of different social media icons for your badge.

Style
Use one of Foundry’s built-in color swatch presets or choose your own custom color for your badge. Using the custom color picker you can set the color for background and icon. You can choose separate color for the hover state when using the Custom setting as well.

Starting with Foundry v2 you're now able to also choose to use a gradient for your individual badge background. v2

Link
Allows you to set the link for your social media badge.

Use ToolTip
Add a popup tooltip to your individual Social Badge item. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!
Insight
Tooltips

Not sure your visitors will recognize a specific social media site's icon? Enable the tooltip and use that as a way to bring a little clarity to your social media links.

Don't forget that you'll also need to enable the Tooltip feature in the Foundry theme's settings as well.