RazorTools Font Awesome

Font Awesome

Use Font Awesome icons in your views with a fluent API.

Getting Started

Get Font Awesome

Head over to Font Awsome web site and click the Start for Free button. Create a new kit and then keep track of the generated script tag, you will use this later.

Create a New MVC Project

Start Visual Studio and create an basic ASP.NET

See Get started with ASP.NET Core MVC.

Add the NuGet Package

Add the RazorTools Font Awesome library using NuGet.

To install use the .NET CLI

>dotnet add package Mvc.RazorTools.FontAwesome

or Package manager

PM>Install-Package Mvc.RazorTools.FontAwesome

Add the library Reference

Open _ViewImports.cshtml and the using statement shown below to the end of the file.

@using Mvc.RazorTools.FontAwesome

Add the <script> Tag

Finally, add the script tag to your _Layout.cshtml file at the bottom of the page before the </body> tag.

<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>

where xxxxxxxxxx.js is the reference to your Font Awesome kit you created in the first step..

Display Your First Icon

Open the Index.cshtml view that was automatcially generated when you crated your MVC project. Add the line of code shown below at the end of the file.

@FaIcons.Quidditch.Create().WithStyle(FaStyles.Solid)

Every icon starts with @FaIcon followed by the desired icon name (Intellisense will provide the full list). The next extension needed is .WithStyle() which specifies the style of the icon (solid, regular, light or duotone).

Note the above example uses FaStyles.Solid which is included in the free version. This library includes all free and pro icons and styles. If you choose a pro version or style that is not included in your kit, it will not display.

The next section shows how to query the library for free and pro versions.

#Using the Library

Display Basic Details

In the sample application Bootstrap 4 with a basic theme is in place.

<ul class="list-group mb-5 w-50">
	<li class="list-group-item d-flex justify-content-between align-items-center active">
		<span>@FaIcons.Comment.Create().WithStyle(FaStyles.Solid) Version</span>
		<span class="badge badge-primary badge-pill">@FaIconSet.Version</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		<span>@FaIcons.ChevronCircleRight.Create().WithStyle(FaStyles.Solid) Total Icons</span>
		<span class="badge badge-primary badge-pill">@FaIconSet.All.Count().ToString("#,###")</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		<span>@FaIcons.ChevronCircleRight.Create().WithStyle(FaStyles.Solid) Free Icons</span>
		<span class="badge badge-primary badge-pill">@FaIconSet.All.Where(t => (t.Value.License & FaLicenseType.Free) == FaLicenseType.Free).Count().ToString("#,###")</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		<span>@FaIcons.ChevronCircleRight.Create().WithStyle(FaStyles.Solid) Free Icon Variations</span>
		<span class="badge badge-primary badge-pill">@FaIconSet.All.Where(t => (t.Value.License & FaLicenseType.Free) == FaLicenseType.Free).SelectMany(t => t.Value.FreeStyles).Count().ToString("#,###")</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		<span>@FaIcons.ChevronCircleRight.Create().WithStyle(FaStyles.Solid) Pro Icons</span>
		<span class="badge badge-primary badge-pill">@FaIconSet.All.Where(t => (t.Value.License & FaLicenseType.Pro) == FaLicenseType.Pro).Count().ToString("#,###")</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		<span>@FaIcons.ChevronCircleRight.Create().WithStyle(FaStyles.Solid) Pro Icon Variations</span>
		<span class="badge badge-primary badge-pill">@FaIconSet.All.Where(t => (t.Value.License & FaLicenseType.Pro) == FaLicenseType.Pro).SelectMany(t => t.Value.ProStyles).Count().ToString("#,###")</span>
	</li>
</ul>

The code above is place in a Razor page and generates the output shown below.

Display an Icon with Varying Size

An icon can be easily changed using the WithSize() extension with FaSizes.

@FaIcons.Comment.Create().WithStyle(FaStyles.Solid).WithSize(FaSizes.Lg2x)

The sizes can be Xs, Sm, Lg and Lg2x to Lg10x. Intellisense in the Visual Studio IDE will show you all of the available options.

TIP: To break the code across mutiple lines wrap the code block in @() as shown below.

@(FaIcons.Comment.Create()
	.WithStyle(FaStyles.Solid)
	.WithSize(FaSizes.Lg2x))

Available Options

Transform

.WithTransform() can be used to apply basic transformations such as spin, pulse, rotate and flip. Specify an FaTransforms value.

Options

.WithOptions() can be used to apply some basic options such as border, fixed width, pull left, pull right and invert. Specify an FaOptions value.

Brand Icons

If an icon is a brand, such as Facbook or FedEx icons, use .AsBrand() with the icon.

Styles

Additional styles can be applied using the .WithCssStyle(name, value) to apply custom CSS styles. Custom class values can be added using .WithClass(value).

Stacking Icons

Two icons can be stacked on top of each other to create a new icon. Additional options and styles can be specified on either icon to achieve a unique result.

The code below shows how to create a stacked icon.

@using (Html.BeginFaStack(FaSizes.Lg2x))
{
	@FaIcons.Sun.Create().WithStyle(FaStyles.Solid).WithStackAttribute(FaStackAttributes.Stack2x)
	@FaIcons.Thermometer.Create().WithStyle(FaStyles.Solid).WithStackAttribute(FaStackAttributes.Stack1x).WithOption(FaOptions.Inverse)
}

The code above results in the image shown below.