Font Awesome Forms using CSS

This asset seeks to demonstrate how CSS can be used in tandem with Font Awesome’s icon suite to create more ascetically pleasing forms in Office 365.


AuthorPatrick Abel
Long DescriptionThis prototype spawned from a desire to provide contextual clues in form labels for different types of data being collected (i.e. email, phone, date-picker, etc.). The attached sample form and code snippet is intended to provide a starting point for extending Nintex Forms with more robust CSS styling to improve readability and aesthetics. CSS can be a little tricky to wrangle sometimes, so hopefully this asset will provide some insight into what’s possible! I’m a big fan of the Font Awesome (FA) suite of icons, so one of the main things I’m doing in the CSS here is leveraging the CSS ::before Selector to inject leading font-awesome icons on form labels based on a specified CSS class (i.e. faUser). For example, you can drop a label control on your form and by providing a CSS class value of “faEmail“, your control will prepend an email icon: Beyond Label enhancements, I have also built out samples for extending the following with font-awesome icons as well:Choice controlsYes/No controlsButton controls (Save and Cancel)  Based on what we saw at InspireX this year, I suspect aspects of this solution will become obsolete with the upcoming form updates but I hope this is helpful nonetheless. Thanks!
DependenciesThis solution is dependent upon the Font Awesome icon suite (referenced through a CDN in the CSS code).
Support InfoPatrick Abel | Summit 7 Systems |
CompatibilityNintex Forms for Office 365
PlatformSharePoint Online (Office 365)
Additional InformationThe sample form included (attached below) in this asset was built using Nintex Forms for SharePoint Online (Office 365). However, none of the CSS techniques used in this asset are limited to the cloud product and can be implemented in Nintex Forms for SharePoint on-premises as well.

Nintex Xchange Terms of Use Policy

Nintex makes no warranty or guarantee about the reliability, performance, quality, or functionality of any assets, and any assets you install are therefore provided as is. By downloading this asset, you agree to the terms of use.

Leave a Reply

Your email address will not be published. Required fields are marked *