# Icon Images

## General information

Font Awesome is a popular icon library that provides a wide variety of scalable vector icons that can be customized (size, color, drop shadow, etc) using CSS. It is designed to be used with web projects and it's an easy way to add scalable vector icons and social logos to your website.

A common usage of icons in our applications is for the buttons in the Toolbar of a webpage:

<figure><img src="/files/7HixxmVFvEzPwY1wqYvB" alt=""><figcaption></figcaption></figure>

## Installation

1. Open the following link: <https://fontawesome.com/v5/download>
2. Download the latest free version for the web\*\*\*
3. Store the downloaded files in the folder "Plugins" > "fontsome" (Create the file if it does not exist yet)
4. Add the following line of code in the "Layout.cshtml" file of the project:

```
<link rel="stylesheet" href="~/Plugins/fontsome/css/all.min.css" />
```

## Examples

### Example 1: Arrow icon on Refresh Button

The following describes the process of putting an arrow icon on a "Refresh" Button, so that it looks like this:

<figure><img src="/files/jNfmsAbPPhYGgH1CiHoG" alt=""><figcaption></figcaption></figure>

First, go to the Font Awesome webpage and search for "arrow". After finding the right arrow icon, click on it and the following window pops up containing the code for the arrow icon:

<figure><img src="/files/XVUoxgxBg3kR7qWdqRB8" alt=""><figcaption></figcaption></figure>

Then, insert this code into the line for the "Refresh" Button, placed right before the Text that says "Refresh" because this is where it should be displayed on the Button:

```
<a id="btn-refresh" class="btn btn-primary"><i class="fa-solid fa-arrow-rotate-right"></i> Refresh</a>
```

### Example 2: Clickable List Icon in a Table

The following describes the process of putting a clickable list icon in every of a column of a Data Table, so that it looks like this:

<figure><img src="/files/AplnbkWwD6HugsXu4L3f" alt=""><figcaption></figcaption></figure>

First, go to the Font Awesome webpage and search for "list". After finding the right arrow icon, click on it and the following window pops up containing the code for the list icon:

<figure><img src="/files/SmUisaLW7ppEEnuWw0hy" alt=""><figcaption></figcaption></figure>

Then, insert this code into the line for the first column of the Table body, placed right between the \<a> tags:

```
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td class="text-center"><a data-value="@item.ID" class="go-detail"><i class="fa-solid fa-rectangle-list"></i></a></td>
            <td class="text-center">@item.SerialID</td>
            <td>@item.Station.Name</td>
            <td class="text-center">@string.Format("{0:MM/dd/yy}", item.CreatedDate)</td>
            <td class="text-center">@Html.CheckBox("default", item.IsDone, new { @disabled = "disabled", @style = "height:15px" })</td>
        </tr>
    }
</tbody>
```

## &#x20; Video

{% embed url="<https://www.youtube.com/watch?v=BATVa4vGZto>" %}


---

# 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://aeudoc.gitbook.io/developer/presentation/icon-images.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.