2 Simple Steps to Unlock Font Awesome for Ninja Forms

Want your forms to have a little extra something to attract a visitor’s eye? Spruce things up for your regular guests? Font Awesome for Ninja Forms is the perfect way to add a bit of visual flair to your form fields!

Using Font Awesome for Ninja Forms has been and continues to be a popular request from Ninja Forms users. So much so, in fact, that we built Ninja Forms 3.0 with Font Awesome already enqueued in our codebase. It’s a two step process to place Font Awesome icons in your form fields: 1) copy 2) paste. Seriously. That’s it. Many of you aren’t aware of this though, so let’s show you how! 😀

What is Font Awesome?

For the uninitiated, Font Awesome is a very cool resource for premade and ultimately stylable icons. Check out their list of hundreds of available icons! There’s something there for virtually every need. By enqueuing a bit of code on your website, you can use the code snippet assigned each icon to place that icon literally anywhere on your website.

Many of you have asked about doing this specifically for your forms… so we’ve obliged by doing the hard part for you already. The code snippet is already in place i the Ninja Forms 3.0 codebase. There’s no need to download, prep, or anything. It’s totally plug-and-play. Let me show you how!

Using Font Awesome for Ninja Forms

Like I said previously, we’ve done most of the work for you. All you really have to do is find the icon you want, and copy and paste it where you want it. Let’s do an example by placing an envelope icon in the label of an Email field. You can use the same technique to have a Font Awesome icon appear virtually anywhere in your Ninja Forms.

Be sure to check out their list of icons if you haven’t already. We’ll be using this email icon specifically in the example below.

Note: The following steps assume that you have opinionated styles activated, or a solution enqueuing Font Awesome. For easy documentation on how to activate opinionated styles, please see the following: https://ninjaforms.com/docs/styling-your-forms/

Step 1: Copy

Each Font Awesome icon has a bit of code contained within an <i> tag. Check out the Font Awesome page for our envelope icon to see what I mean. For this specific icon, our <i> tag is:

<i class='fa fa-envelope' aria-hidden='true'></i>

That gets copied into the settings window of the field you want the icon to appear in. Go ahead and copy that now, then head over to Ninja Forms!

Step 2: Paste

Here’s our Email field settings window:

See the big red arrow? That’s where we’re going to be pasting the Font Awesome code snippet. Just click to place your mouse cursor to the left of the word Email, and paste. I’d probably place a space in there too, just for the front end aesthetic.

That’s quite literally all there is to it. Here’s what we have on the front end view as users will see it:

That’s our stock contact us form with a Font Awesome email icon inserted. Easy peasy! Font Awesome icons are easily styleable if you know any CSS at all. If you don’t head over to their website and take a look at their getting started material and documentation. It’s really not that hard at all!

Have some awesome design work using Font Awesome for Ninja Forms that you’d like to share? Questions about how to use it? Ask away in the comments below!