Click on Icons at the top of the page and use the search on the icons page to find a specific icon. If you don’t head over to their website and take a look at their getting started material and documentation. Now that you have installed Font Awesome on our website, let’s head back to the Font Awesome website to pick the icon you want to use. Easy peasy! Font Awesome icons are easily styleable if you know any CSS at all. That’s our stock contact us form with a Font Awesome email icon inserted. Here’s what we have on the front end view as users will see it: That’s quite literally all there is to it. I’d probably place a space in there too, just for the front end aesthetic. Just click to place your mouse cursor to the left of the word Email, and paste.
#Enqueue font awesome code
See the big red arrow? That’s where we’re going to be pasting the Font Awesome code snippet. Go ahead and copy that now, then head over to Ninja Forms! Step 2: Paste That gets copied into the settings window of the field you want the icon to appear in. Check out the Font Awesome page for our envelope icon to see what I mean.
#Enqueue font awesome how to
For easy documentation on how to activate opinionated styles, please see the following: Step 1: CopyĮach Font Awesome icon has a bit of code contained within an tag. Note: The following steps assume that you have opinionated styles activated, or a solution enqueuing Font Awesome. We’ll be using this email icon specifically in the example below. You can use the same technique to have a Font Awesome icon appear virtually anywhere in your Ninja Forms.īe sure to check out their list of icons if you haven’t already. Let’s do an example by placing an envelope icon in the label of an Email field. All you really have to do is find the icon you want, and copy and paste it where you want it. Like I said previously, we’ve done most of the work for you. Let me show you how! Using Font Awesome for Ninja Forms There’s no need to download, prep, or anything. The code snippet is already in place i the Ninja Forms 3.0 codebase. Many of you have asked about doing this specifically for your forms… so we’ve obliged by doing the hard part for you already. 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. Check out their list of hundreds of available icons! There’s something there for virtually every need. Many of you aren’t aware of this though, so let’s show you how! ? What is Font Awesome?įor the uninitiated, Font Awesome is a very cool resource for premade and ultimately stylable icons.
It’s a two step process to place Font Awesome icons in your form fields: 1) copy 2) paste. So much so, in fact, that we built Ninja Forms 3.0 with Font Awesome already enqueued in our codebase. Using Font Awesome for Ninja Forms has been and continues to be a popular request from Ninja Forms users. 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! In your appearance > menu options, add the option to include CSS classes from the drop-down menu on top.Font Awesome for Ninja Forms is the perfect way to add a bit of visual flair to your form fields! Click To Tweet It’s called ‘ETmodules’ and because it is built in, we won’t have to import any external fonts. We can simply call the font like this: selector The ‘ETmodules’ Icon Fontĭivi uses its own icons font for modules like the blurb as well as for the hamburger menu and the phone and mail icons in the top header. You won’t need a plugin or Font Awesome to add menu icons using this tutorial. It does work when excerpt is used in blog posts element. I have included the following code in functions.php (as font awesome explains on getting started page) but the font is not showing on the masonry portfolio excerpt when placed on the image itself. There are also plenty of tutorials for adding icon support from third party services like Font Awesome, but it struck me that Divi already comes with icons baked in, so why not use those? I have a question about activating Font Awesome. As it’s not a feature of WordPress or Divi, adding them can be a bit of a task. Icons are a great way of making your menu items pop.