Matrix themes include some external plugins and libraries to enhance your website with more professional features. Among these is the Font Awesome framework, which enables you to add custom icons to your website. Font Awesome icons can be found in custom widgets and certain admin elements, such as slider arrows, copy buttons, etc.
Full list of available Font Awesome Icons in Matrix Themes can be found here:
In Matrix Themes, go to the admin menu, select 'Shortcodes,' and then choose 'Fa Description' to find examples of text boxes with Font Awesome Icons
How to customize
Check the following example of a widget using an icon from Font Awesome framework:
<div class="fa fa-gem fa-4x">
</div>
Icon size
To make the icons bigger, you can use the classes
fa-lx, fa-2x, fa-3x, fa-4x, fa-5x
The other method is using the inline style:
<div class="fa fa-gem" style="font-size:30px;>
</div>
Color setup
The same way with inline style you can change the color of the icon
<div class="fa fa-gem" style="color:#ad1313;">
</div>
How to update
To update the Font Awesome framework to the latest version used in Matrix themes, please follow the steps below:
- Go to the 'Updates' section and download the file 'libraries.css.' Upload it to your website in Design > Custom Templates > Files.
- In the same 'Updates' section, you will find the font icons in a zip folder. Download it and upload all 8 files to your website (Design > Custom Templates > Files).
Troubleshooting
After updating the Font Awesome framework on your website, it might take some time to see the new icons. To ensure that everything has been done correctly, use the incognito mode of your browser to check if everything works fine.
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.