Installation

Installing the "Icon Fonts" atom on your website is a really simple process. You just need to follow the below instructions depending on the platform you are on.

Installing on Joomla

1. Download the icon-fonts-atom.zip file.
2. UNZIP it on your computer. You will find two files and one folder - icon-fonts.html.twig, icon-fonts.yaml and fonts.
3. Copy the icon-fonts.html.twig and icon-fonts.yaml files to root/templates/TEMPLATE_DIR/custom/particles (if the particles folder does not exist, you will need to create it manually). Basically, this step is the same as the one described in the Creating a New Particle chapter in the Gantry 5 Documentation.
4. Copy the fonts folder to root/templates/TEMPLATE_DIR/custom.

The following video shows the above steps in details (watch it in Fullscreen and FullHD for better quality).

Installing on Wordpress

1. Download the icon-fonts-atom.zip file.
2. UNZIP it on your computer. You will find two files and one folder - icon-fonts.html.twig, icon-fonts.yaml and fonts.
3. Copy the icon-fonts.html.twig and icon-fonts.yaml files to root/wp-content/themes/TEMPLATE_DIR/custom/particles (if the particles folder does not exist, you will need to create it manually). Basically, this step is the same as the one described in the Creating a New Particle chapter in the Gantry 5 Documentation.
4. Copy the fonts folder to root/wp-content/themes/TEMPLATE_DIR/custom.

The following video shows the above steps in details (watch it in Fullscreen and FullHD for better quality).

Installing on Grav CMS

1. Download the icon-fonts-atom.zip file.
2. UNZIP it on your computer. You will find two files and one folder - icon-fonts.html.twig, icon-fonts.yaml and fonts.
3. Copy the icon-fonts.html.twig and icon-fonts.yaml files to root/user/data/gantry5/themes/THEME_DIR/particles/ (if the particles folder does not exist, you will need to create it manually). Basically, this step is the same as the one described in the Creating a New Particle chapter in the Gantry 5 Documentation.
4. Copy the fonts folder to root/user/data/gantry5/themes/THEME_DIR/.

The following video shows the above steps in details (watch it in Fullscreen and FullHD for better quality).

Usage

All particles by nature are really intuitive and easy to use. Also, most of the fields in the particle have a tooltip text that explains what it is about.

Regarding the usage of the "Icon Fonts" atom - you just need to load the atom in your "Base" outline and then you can use the classes (icons) of all these Icon Font Libraries in all Icon Picker fields in Gantry 5. Many particles have an Icon Picker field, so you are no longer limited to the Font Awesome library that comes with the Gantry 5 framework. All you need to do is to enable the particular icon font you want to use, visit their website, copy the icon class and paste it in the Icon Picker field.

You might also want to watch the Demo Video, which shows how you can use the "Icon Font" atom.

Download

You can download all particles from our Download Section.