Iconfont

Introduction

Iconfont is a special fieldtype where you select font icons like FontAwesome. The fieldtype introduce a nice and clean way of selecting icons, but its get even better by defining presets to select only the icons that the user needs.

Currently, we support FontAwesome and Google Material out of the box. But it also supports your own icon (perhaps generated with flaticon or any other). So perhaps we support all providers ;-)

Control panel overview

Control panel overview

Control panel overview

Field (Third Party) support

Documentation versions

Installation

Prerequisites

Make sure your system meets the minimum requirements:

Installation Instructions

Update instructions

License

For every paid addon you need to validate your license in order to activate the module.

On a local environment, like *.dev *.local *.localhost *.test the license is valid for testing and building a new or existing sites. For every other domain, you need to have a valid license.

Process of validating

Once installed, you will asked to enter your license key. When you entered a valid license you can hit the "Save license" button. This will start validating your license and will redirect you to addons.reinos.nl to login into your account. You can also register a new account in this process.

Control panel overview

Once logged in, you are asked to use your current account or to login with another one.

Control panel overview

Using the current logged in account, the server will check all info related to your license and once valid, it will redirect you back to your site where you see either a success message or an error message.

Control panel overview

License field

This module is using a license field to check if the license for the module is valid or not. On addons.reinos.nl you can check your license and add your valid domains.

Control panel overview

In the Module CP you can enter then your license Control panel overview

When you enter a wrong license, the module will not work and it shows you an warning Control panel overview

Invalid license

Sometimes it happens that the license system says you have an invalid license. When this happens, make sure you have entered your domain url in your account, next to your license on addons.reinos.nl.

If this will not fix your license problem, please contact us on https://addons.reinos.nl/support

CP Presets

In order to use Iconfont you need to create a preset from the Module CP preset page.

Control panel overview

By default, we create for you 2 presets based on FontAwesome and Material. It also includes the whole set of icons.

Create your own preset

Beside the 2 default created presets you can also create your own preset. This can be either a preset based on FontAwesome, Google Material, or your own set.

FontAwesome or Google Material

Creating a new preset based on either FontAwesome or Google Material is fairly easy. Just create a new preset, choose your preset name and select FontAwesome or Material.

After that you need to create the presets, meaning what icons to include. To start with the basic, you can click on the Load default set button that will load all available icons for that provider.

From here you can start modifying the preset to a set of icons you need.

Your own font

Loading your own font into the fieldtype is also very easy but it requires that the fonts are included in a .css file.

From there you can enter your css url in the field css url(s).

Control panel overview

The above images shows an example of using flaticon fonts (See https://www.flaticon.com/)

JSON preset structure

We use JSON to feed the icon generator with the icons.

The JSON accept 2 formats, it's eiter a list of icons, or it's a list with categories.

Plain list of icons

[
    "fab fa-accessible-icon",
    "fas fa-american-sign-language-interpreting",
    "fas fa-assistive-listening-systems",
    "fas fa-audio-description",
    "fas fa-blind"
]

Group of icons

{
    "Category name" : [
        "fab fa-accessible-icon",
        "fas fa-american-sign-language-interpreting",
        "fas fa-assistive-listening-systems",
        "fas fa-audio-description",
        "fas fa-blind"
    ]
}

How to use

Note: you need to include your Fonts and CSS by your self. (*)The fieldtype will only place the name of the class, that's all.

(\this is because most of the websites already include the fonts in the main style)*

Template Example (fontawesome)

<!-- include the fontawesome lib -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" type="text/css" media="print, projection, screen" />

{exp:channel:entries channel="iconfont"}
    your icon <i class="{iconfont_field}"></i>
{/exp:channel:entries}

Changelog

1.1.0 (15-02-2021)

1.0.0 (08-02-2021)