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:

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:

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:

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:

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:

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>

Video