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 ;-)
Make sure your system meets the minimum requirements:
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.
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.
Once logged in, you are asked to use your current account or to login with another one.
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.
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.
In the Module CP you can enter then your license
When you enter a wrong license, the module will not work and it shows you an warning
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
In order to use Iconfont you need to create a preset from the Module CP preset page.
By default, we create for you 2 presets based on FontAwesome and Material. It also includes the whole set of icons.
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.
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.
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).
The above images shows an example of using flaticon fonts (See https://www.flaticon.com/)
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.
[
"fab fa-accessible-icon",
"fas fa-american-sign-language-interpreting",
"fas fa-assistive-listening-systems",
"fas fa-audio-description",
"fas fa-blind"
]{
"Category name" : [
"fab fa-accessible-icon",
"fas fa-american-sign-language-interpreting",
"fas fa-assistive-listening-systems",
"fas fa-audio-description",
"fas fa-blind"
]
}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)*
<!-- 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}