Features

  • 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

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

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.

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.

  • 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.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us