Icon Font
Add stunning silhouetted icons to your pages quickly and easily using the Icon Font stack.Choose from over 300 different icons.
- Choose from over 300 different icons
- Set icon size using presets or custom sizes at each breakpoint
- Rotate or flip icon
- Add a background to your icon
- Style backgound with presets or custom color picker
- Set background size
- Round corners of background
- Set alignment of icon
- Choose from preset color or use custom color picker
- Add link to icon
- Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.
Example
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor amet lacus nunc.
Lorem ipsum dolor sit amet, sapien platea morbi dolor amet lacus nunc.
Lorem ipsum dolor sit amet, sapien platea morbi dolor amet lacus nunc.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Using Icon Font
General
Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Image stack.
Style
Icon
Choose from over 300 different icons from the Font Awesome icon library.
Size
Set the size of the icon using one of Font Awesome’s multipliers (which bases the icon size off of your Base font size as defined in the Foundry Control Center) or choose a custom size of your own.
Alignment
Allows you to set the justification of the Icon Font. You can set the alignment to Left, Center or Right.
Icon Color
Set the color of the icon to match your site. You may use one of Foundry’s color swatch presets or make use of custom color pickers to style the icon.
Background
Add a background to your icon. You may use one of Foundry’s color swatch presets for the background. If you do the icon itself is automatically set to white. You may also choose to use the RapidWeaver color picker to set a custom color for your background.
Background Size
Choose how large you wish the background for your icon to be.
Border Size
When the Custom background style has been selected you’re given access to the Border Size setting. This allows you to add a border to your icons, and adjust its size.
As of Foundry v2 the max border size goes from 3px to 20px. Other adjustments have been made to help clean up the centering of the icon within the background as well. v2
Border Color
Select the color of the border for your icon. This feature is also available to you when using the Custom setting for the icon’s Background style.
Starting with Foundry v2 you can now change the opacity of the border color as well. v2
- Please Note: The background size feature is only active then a background other than "None" is chosen.
Round Corners
When using a background for your icon you can choose to round the corners of the icon container. By default the basic Foundry rounded corner value is used. You may opt however to define your own amount of rounding for the corners. You can set all corners to have the same value or define them individually.
Orientation
Rotation
You’re able to choose to rotate the icon itself 90, 180 or 270 degrees if you like.
Flip
The Icon Font stacks lets you flip the icon horizontally or vertically if you need to.
Link
Add Link to Icon
Add and set a link on your icon. You may link to an internal page or an external site using the built-in RapidWeaver link dialog.