# Font Awesome Icons

![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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atd-dts.gitbook.io/atd-knack-operations/knack-code/looks/fa-icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.