This project is read-only.

Installation

To use Font Awesome for MVC Razor Tools in your projects install this package into your project from NuGet using the command Install-Package Mvc.RazorTools.FontAwesome in the Package Manager Console. If you have not already added the Font Awesome package it will be added automatically for you.

Inline Icons

To display a standard inline icon in a Razor view use the following syntax:

Normal

@Html.FontAwesome(FontAwesomeIconSet.Star)


Alternatively, the icon can be displayed like this:

@FontAwesomeIconSet.Star.Html

With Custom Class

To customize by adding additional classes use the following syntax:

@Html.FontAwesome(FontAwesomeIconSet.Star.Customize("class1"))

Larger Icons

To increase icon sizes relative to their container, use FontAwesomeStyles.Large1x (Large1x is a 33% increase).

Large1x
@Html.FontAwesome(FontAwesomeIconSet.CloudUpload, FontAwesomeStyles.Large1x)


or,

@Html.FontAwesome(FontAwesomeIconSet.CloudUpload.Large1x())


or,

@FontAwesomeIconSet.CloudUpload.Large1x().Html


Large2x
@Html.FontAwesome(FontAwesomeIconSet.CloudUpload.Large2x)


Large3x
@Html.FontAwesome(FontAwesomeIconSet.CloudUpload.Large3x)


Large4x
@Html.FontAwesome(FontAwesomeIconSet.CloudUpload.Large4x)


Large5x
@Html.FontAwesome(FontAwesomeIconSet.CloudUpload.Large5x)


NOTE: The alternate display methods shown for Large1x will work for all styles.

Fixed Width Icons

Use FontAwesomeStyles.FixedWidth to set icons at a fixed width. Great to use when variable icon widths throw off alignment. Especially useful in things like navigation lists.

@Html.FontAwesome(FontAwesomeIconSet.Book.FixedWidth)


!!List Icons
Use FontAwesomeStyles.UnorderedList and FontAwesomeStyles.ListItem to easily replace default bullets in unordered lists.

<ul class="@FontAwesomeStyles.UnorderedList.Html">
  <li>@Html.FontAwesome(FontAwesomeIconSet.CheckSquare.ListItem) List icons (like these)</li>
  <li>@Html.FontAwesome(FontAwesomeIconSet.CheckSquare.ListItem)</i>can be used</li>
  <li>@Html.FontAwesome(FontAwesomeIconSet.Spinner.ListItem, FontAwesomeStyles.Spin)</i>to replace</li>
  <li>@Html.FontAwesome(FontAwesomeIconSet.Square.ListItem)</i>default bullets in lists</li>
</ul>

Bordered & Pulled Icons

Use FontAwesomeStyles.Border and FontAwesomeStyles.PullRight or FontAwesomeStyles.PullLeft for easy pull quotes or article graphics.

<span>@Html.FontAwesome(FontAwesomeIconSet.QuoteLeft.PullLeft.Border)
Use a few styles together and you'll have easy pull quotes or a great introductory article icon.</span>

Spinning Icons

Use the FontAwesomeStyles.Spin class to get any icon to rotate. Works well with FontAwesomeIconSet.Spinner, FontAwesomeIconSet.Refresh, and FontAwesomeIconSet.Cog.

@Html.FontAwesome(FontAwesomeIconSet.Cog.Spin)

Rotated & Flipped

To arbitrarily rotate and flip icons, use the FontAwesomeStyles.Rotate* and FontAwesomeStyles.Flip*.

@Html.FontAwesome(FontAwesomeIconSet.Shield.Rotate90)
@Html.FontAwesome(FontAwesomeIconSet.Shield.Rotate180)
@Html.FontAwesome(FontAwesomeIconSet.Shield.Rotate270)
@Html.FontAwesome(FontAwesomeIconSet.Shield.FlipHorizontal)
@Html.FontAwesome(FontAwesomeIconSet.Shield.FlipVertical)

Stacked Icons

To stack multiple icons, use FontAwesomeStack to combine multiple icons.

@Html.FontAwesomeStack(FontAwesomeIconSet.SquareO, FontAwesomeIconSet.Twitter)


You can even throw larger icon classes on the parent to get further control of sizing (with additional styles).

@Html.FontAwesomeStack(new FontAwesomeIcon[] { FontAwesomeIconSet.SquareO, FontAwesomeIconSet.Twitter }, FontAwesomeStyles.Large1x)


or,

@FontAwesomeStack.Create(FontAwesomeIconSet.SquareO.Large2x(), FontAwesomeIconSet.Twitter).Large2x().Html


NOTE: When using styles on the FontAwesome Stack via the Html Extension method the icons must be passed as an IEnumerable<FontAwesomeIcon>
There is also a syntax available that is similar to the BeginForm syntax

@using (Html.BeginFontAwesomeStack(FontAwesomeStyles.Large1x))
{
    @FontAwesomeIconSet.SquareO.Large2x().Stack2x().Html
    @FontAwesomeIconSet.Twitter.Stack1x().Html
}


NOTE: _When using the beginFontAwesomeStack syntax you must specify either the Stack1x or Stack2x style. Omitting the style cause the icon to be rendered outside of the stack.

Custom Styles

To apply a style to icon in the stack use the Custom() on the icon.

@Html.FontAwesome(FontAwesomeIconSet.Star.Custom("customStyle"))

Last edited Oct 6, 2015 at 4:36 PM by porrey, version 23