Skip to main content

Font Awesome Icons (faicon)

This TYPO3 extension adds a selection menu for Font Awesome icons to the page properties. The list of icons is loaded directly from the included Font Awesome library. If the bootstrap package is used, the included static TypoScript can replace the menu partial and thus the icons will be displayed in the frontend.

Features

  • Adds an Icon-Selector to the page properties, using the Font-Awesome icon font library
  • Provides template file with menu icons for the TYPO3 Bootstrap Package

Installation

Install the extension by downloading it in the extension manager or on https://extensions.typo3.org/extension/faicon/.
Composer installation will be added in first stable version

Configuration

You don't need to configure anything to get this extension running. But clear your caches after installing.

Using faicon with the Bootstrap Package

You can simply include the static TypoScript "Faicon: Icons for Bootstrap Package" into your root template to make faicon overwrite the template of the Bootstrap Package. The extension overwrites the main navigation template by adding a new partial root path like this:

TypoScript Setup

page{
    10{
        partialRootPaths{
            0 = EXT:bootstrap_package/Resources/Private/Partials/Page/
            1 = EXT:bootstrap_package/Resources/Private/Partials/Page/
            5 = EXT:faicon/Resources/Private/BootstrapPackage/Partials/Page/ (new path by faicon)
        }
    }
}

Changing the order of the paths

If you want to change the order of the paths, or the sequential number is already used by another extension, you can do that by adding a few lines in your TypoScript setup:

TypoScript Setup

// Adding a new path (use any random number that is higher than the last existing one)
page.10.partialRootPaths.765 = EXT:faicon/Resources/Private/BootstrapPackage/Partials/Page/

// Alternative: Clear the entry and set a new path
page.10.partialRootPaths.5 >
page.10.partialRootPaths.5 = mypath/myfolder/

Using your own Fluid-Templates

Example of using the icon field in a menu. (Assuming your menu entry has the variable name "{menu}")

Fluid Template

<a class="nav-link">
   <f:if condition="{menu.data.tx_faicon_icon}">
       <i class="{menu.data.tx_faicon_icon}"></i>
   </f:if> {menu.title}
</a>