Use Font Awesome 5 with any element, even on submit buttons which lacks knack icons

API & Customization Show & Tell
1

It's pretty simple for any user to use Font Awesome 5 directly with some CSS.

You can even use them on the submit button and backlink which doesn't natively have any kind of icon associated.

First head on to the CSS section of your app and add the following line:

 
Then you can use any font awesome 5 icons you wish, you just have to use the proper CSS selector for the place you wish and choose your icon from the available ones.
 
In my case, I'm appending the icon to the submit button which doesn't have icons on the knack platform, so I'm using the :before pseudo-selector.
 
 
Submit button CSS example:
 
.kn-button[type=submit]:before{
font-family:"Font Awesome 5 Free";
content:"\f0c7";
display:inline-block;
padding-right:3px;
vertical-align:middle;
font-weight:900;
}
 
Note: you must use the unicode, not the i class for this to work with pseudo :before.
 
Back to previous page example:
 
.kn-back-linka:before{
font-family:"Font Awesome 5 Free";
content:"\f359";
display:inline-block;
padding-right:3px;
vertical-align:middle;
font-weight:900;
}
 
You can use this on any element of your app.
1 Like
2

If you are using font awsome for menu items, you should use it for all menu items, you can use it anywhere on your knack app, you just have to pick the correct selectors.

I think I recall that when using on menu items the dropdown arrow would not display on some scenarios, inspect it with chrome dev tools to check what's going on there, although I'm pretty sure that happened to me with the regular knack icons in the menu also.

That is not an issue if you use it on other parts of the app, like buttons, forms, labels, etc. 

3

Hi Mark,

It's really just the way I initially posted, maybee you need to clear your browser cache!?

Just to summarize, place this on your CSS, example for submit button (place the import code in the first line of your CSS):

 
.kn-button[type=submit]:before{
font-family:"Font Awesome 5 Free";
content:"\f0c7";
display:inline-block;
padding-right:3px;
vertical-align:middle;
font-weight:900;
  }