Technical Information

The add-on adds the FontAwesome files to the website at:

~/Frontend/Orckestra/Web/Html/FontAwesome/

It also adds a C# Inline function called "Orckestra.Web.Html.FontAwesome.GetIconNames".

How to use the GetIconNames function

The "Orckestra.Web.Html.FontAwesome.GetIconNames" function parses the font-awesome.css and returns the list of font icon options.

It can be used in the "FontIconSelector" widget.

In a Razor function

Here is the example of using it in a Razor function:

private const string iconWidget = @"
	<f:widgetfunction xmlns:f=""http://www.composite.net/ns/function/1.0"" 
		name=""Composite.Widgets.String.FontIconSelector"">
		<f:param name=""ClassNameOptions"">
            <f:function name=""Orckestra.Web.Html.FontAwesome.GetIconNames"" />
        </f:param>
        <f:param name=""StylesheetPath"" 
			value=""~/Frontend/Orckestra/Web/Html/FontAwesome/css/font-awesome.css"" />
        <f:param name=""ClassNamePrefix"" value=""fa fa-"" />
    </f:widgetfunction>";

[FunctionParameter(Label = "Icon", WidgetMarkup = iconWidget)]
public string Icon { get; set; }

In a data type

You can also use it on a string field of a data type:

1. Add a field in a data type.
   1. Field type: String
   2. String maximum length: Unlimited
2. Change the widget type to Composite.Widgets.String.FontIconSelector.
3. Set the widget parameters:
   1. Class Name Options: Use the function Orckestra.Web.Html.FontAwesome.GetIconNames.
   2. Stylesheet Path: ~/Frontend/Orckestra/Web/Html/FontAwesome/css/font-awesome.css
   3. Class Name Prefix: fa fa-
4. Save your changes.

Examples

Some other add-ons depend on the Font Awesome icons and require this add-on be pre-installed. For example, the "Orckestra.Web.Html.TeaserCards" add-on uses it in the FontIconSelector widget on the "Icon" parameter in the "IconTeaser" function.

The starter sites also pre-install and use the Font Awesome add-on. For example, the "Top Links" feature on the "Venus" starter site makes use of the Font Awesome icons in the FontIconSelector widget on the "Icon" field.