Font Awesome 5 is Here
I am so excited to finally ship Font Awesome 5 Pro. Foundation 6 comes with a full FA5 Pro license. This means that you can use FA5 Pro on all of your F6 websites forever. You do not need to pay for the $100/yr subscription. However, you are only licensed to use these in your Foundation 6 projects. You must purchase a license to use FA5 Pro with other themes.
You add FA5 into your projects through the Features section in Site Styles. There are two options:
- Font Awesome 5 - JS + SVG
- Font Awesome 5 - CSS + Fonts
The end result with either stack will ultimately be the same. Feel free to test both to see how you prefer how each one loads. There are pros and cons to both. I would recommend that you start with the CSS + Fonts version. This essentially uses the same methodology that we have used with FA4 for many years.
You simply place your FA5 html snippets from fontawesome.com anywhere on your page. You can style the FA5 icons using the Font Style (for size) and Font Color (for color) swatches. There are predefined elements that you can use to quickly style all icons on the page.
More Awesome Updates
- Theme updated to Foundation v6.6.2 that was just released this week.
- Slider looping fixed
- Dropdown menu accessibility improved
- SVG Alignment has been fixed
- SVG width options updated to better default values for most situations
- New settings in all Column stacks that will allow you to collapse the padding and margins at a breakpoint
- Smooth Scroll animation options have been added to the Anchor Button stack
- Text stack has a new setting to trim the top and bottom margins added by its text content
- Form labels now use the text color defined in Site Styles, not the black color
- Container stacks now default to being set to position relative. This is so that position swatches can easily use them as a parent for positioning
- You can now use various toggle/server visibility stacks (Total CMS, Agent, Tardis) to completely hide entire columns within Columns Pro, Block Grid, Button Group and Vertical Grid
- New visibility option for Show on Focus. This can be used for creating skip links for accessibility
- Button Groups
- A new no gap option to remove the gap between buttons
- Better alignment options
- New style setting to make buttons hollow or clear
- New Menu Heading color option inside the Menu Swatch
- Form Checkboxes
- Now work better with Pi. You can define a false value within the checkbox instead of it always defaulting to zero
- There is a new Min Checked setting that allows you to require that a minimum number of checkboxes are checked
- Swatches
- The swatch settings have been reorganized a bit in order to make things look even simpler for new users
- Components have been renamed to Elements
- On State has been renamed to Pseudo State. This more aligns with what these actually are in CSS
- There have a bunch of new Pseudo states. Learn more about Pseudo Classes
- Child Elements
- Visited
- Focus Within (this one is cool!)
- Placeholder Shown
- Many more…
- Several elements have been fixed: tabs, tables and a few others
- Width, Height and Opacity swatches will no longer apply their styles inside Edit Mode
- The Parent Class setting can now also be used when using Class Mode
Here is the live stream that I did yesterday on this update. There are some minor differences in the released version, but nothing critical.