You can use all the icons of Font Awesome icons pack (version 4.7: https://fontawesome.com/v4.7.0/icons) with your theme. Moreover, each theme includes a specific icons pack:
- Cera uses Feather icons pack,
- Sinclair uses Phosphor icons pack,
- Stego uses Boxicons pack,
- Gorgo: View icons page,
- Armadon: View icons page.
Use Icons from the Theme’s Pack
If you want to use an icon from a pack related to your theme, you can proceed by using one of these html line:
|
1 2 3 4 5 |
<i class="cera-icon cera-thumbs-up"></i> <i class="sinclair-icon sinclair-house"></i> <i class="stego-icon stego-menu"></i><meta charset="utf-8"><meta charset="utf-8"> <i class="gorgo-icon gorgo-heart"></i><meta charset="utf-8"> <i class="armadon-icon armadon-rocket-regular"></i> |
You must first initialize the right icon pack by adding the “yourtheme-icon” class. Then, you just have to choose an icon name via the icons pack mentioned above and prefix the name of your chosen icon with “yourtheme-“.
Use FontAwesome Icons Pack
If you want to use an icon from the Font Awesome pack, you can proceed like this:
|
1 |
<i class="fa fa-star"></i> |
You must first initialize the right icon pack by adding the “fa” class. Then, you just have to choose an icon name via the Font Awesome icons search engine and prefix the name of your chosen icon with “fa-“.
Change Icon Color
The “text-primary” class will force the primary color (of your primary button option field).
If you remove this class, the color will simply inherit the color of its parent (ex. icons in menu will inherit from the color of navigation links).
If you want to change the color of an icon, you can proceed like this:
|
1 2 3 4 5 |
<i class="cera-icon cera-thumbs-up text-primary"></i><meta charset="utf-8"> <i class="sinclair-icon sinclair-house <meta charset="utf-8">text-primary"></i> <i class="stego-icon stego-menu <meta charset="utf-8">text-primary"></i><meta charset="utf-8"> <i class="gorgo-icon gorgo-heart <meta charset="utf-8">text-primary"></i><meta charset="utf-8"> <i class="armadon-icon armadon-rocket-regular <meta charset="utf-8">text-primary"></i> |
Mix Them All!
You can use all the icons present in these two packs and use them at the same time.
Going Further
How to edit the text in a menu?
The text in some sections will not be editable in the classic page builder. The reason is that they are in a menu displayed thanks to Grimlock Menu block.
How to Edit Colors and Icon in a Menu
Some CSS classes allow you to change the background colors of the icons used in a menu. Each of them uses a color set in the customizer.
How to Customize the “Cities” Grid Menu ?
To edit this section, you need to edit the “Cities” menu. Thanks to the Menu Image plugin and Grimlock plugin, this menu is displayed with featured images and texts to make it more appealing.
