> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/atd-knack-operations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/atd-knack-operations/knack-code/looks/fa-icons.md).

# Font Awesome Icons

How to insert and adjust Font Awesome Icon positioning

![Map Marker Icon being used with a section title](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MXgjv6a5viUlhWUJBoG%2F-MXm0tf-bykjYGtcFJGW%2Fimage.png?alt=media\&token=039b5efc-84f8-4376-99c6-faea7d0a94e3)

![Home Icon being set with the icon selector for a Menu or Parent page](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MXgjv6a5viUlhWUJBoG%2F-MXm2gUiWl28ycA4FtFp%2Fimage.png?alt=media\&token=f1e49d16-0acb-4dd9-9539-2ad908b3384c)

![Plus Circle Icon being set with the icon selector for a Menu view (button)](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MXgjv6a5viUlhWUJBoG%2F-MXmBddW6T3RhosdTPeU%2Fimage.png?alt=media\&token=e76a236e-a0ed-43a6-b1d6-85b23d40b2ad)

Knack provides the Font Awesome 4 library as a way to incorporate icons into applications and help reinforce language and look of application elements such as menus or titles shown above.\
\
[Font Awesome 4.7 icons](https://fontawesome.com/v4.7.0/)

### The JS

None needed 😎

### The CSS

These stylings allow us to adjust the position of icons as rendered. For the most part, we use baseline which centers the icon vertically on the block line as shown in the examples above.

```
/****************************************/
/************* Icon Effects *************/
/****************************************/
.fa { vertical-align: baseline; }

.fa-bot { vertical-align: text-bottom; }

.fa-top { vertical-align: text-top; }
```

### The HTML

To incorporate icons into your text, trigger buttons, or custom buttons, you will need to add

```
<i class="fa fa-map-marker"></i>
```

fa is the CSS class being called above followed by the fa-icon-name

### How to Implement

Simply select the icon you want with the icon selector for menus and parent pages

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MXgjv6a5viUlhWUJBoG%2F-MXmDpEhXEF4IAczmkL0%2Fimage.png?alt=media\&token=7b19b66b-eb21-4dea-aad9-eb68cfbcedc6)

or place within your application next to text (or by themselves) in titles or buttons

![Placing the HTML in the View Title](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MXgjv6a5viUlhWUJBoG%2F-MXmDD3rTi3h2nZuZ5xa%2Fimage.png?alt=media\&token=d17836cf-7acb-488c-8bfa-97444ca938a1)

### To Note

* Knack provides only version 4.7 of the FA library currently. [Font Awesome Version 5 icons](https://fontawesome.com/icons?d=gallery\&p=2\&m=free) are available but not yet integrated with Knack.
* The New Knack Builder no longer renders markup on the builder side so you will want to double check that your HTML code is working and your icon is rendering on the live view.