Fontawesome Umbraco rich text editor.

Umbraco comes with the TinyMCE text editor out of the box, the problem out of the box means it is very basic.

If you need to add formats, then you need to add them yourself, but when it comes to adding Font awesome icons, there is no easy way to add them unless you go into the source and manually add them.

In this blog, I will show you how to add Font Awesome icons to the rich text editor using the 'Fa Icon Picker' package and macros.

So to get started, go to packages in the back office and install 'Fa Icon Picker' created by Christopher Muya, once done as a sanity check create a new data type using the package, you will find it's called 'Font Awesome Picker'.

If you can create a datatype, then you are ready to go.

Now create a Macro partials view and call it 'FontAwesome Icons'.

Now add the code below to the partials view:

@using Umbraco.Web.Models
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
    var icon = Model.MacroParameters["fontAwesome"];
    var text = Model.MacroParameters["textBlock"];
    var headings = Model.MacroParameters["headings"];

    switch (headings)
    {
        case "H1":
            <h1>@Html.Raw(text) <i class="@icon"></i></h1>
            break;
        case "H2":
            <h2>@Html.Raw(text) <i class="@icon"></i></h2>
            break;
        case "H3":
            <h3>@Html.Raw(text) <i class="@icon"></i></h3>
            break;
        case "H4":
            <h4>@Html.Raw(text) <i class="@icon"></i></h4>
            break;
        case "H5":
            <h5>@Html.Raw(text) <i class="@icon"></i></h5>
            break;
        case "H6":
            <h6>@Html.Raw(text) <i class="@icon"></i></h6>
            break;
        case "P":
            <p>@Html.Raw(text) <i class="@icon"></i></p>
            break;
        default:
            <p>@Html.Raw(text) <i class="@icon"></i></p>
            break;

    }

}

Backoffice

Now go to Macros and find the partial view you created under macro partials, click on it then click on parameters and add the following:

  • fontAwesome and select the fontawesome icon picker
  • textBlock and select textbox
  • headings and select headings, this is a custom package I created and can be downloaded here.

Now ensure that you select 'Editor Setting' so that the macro can be used in the RTE.

Final Steps.

  • Make sure that the RTE has got macros checked in the data type.
  • Ensure that you select the CSS for Fontawesome in the RTE

Now that everything is set up, go to the RTE and click on the macro icon, select the macro you have created, you should see the following if you followed the steps correctly.

Fontawesome Umbraco rich text editor

Now select an icon to enter, select some text and then select a heading and you should see the following.

Macro success

That's it, I hope you found this short blog helpful and you can now use 'font awesome' in your site.