Foxbright has recently added a new feature into the Rich Text Editor called Font Awesome. This is a collection of icons including social media icons and alternative snippets that are relevant to today’s web environment. The feature allows the size and color of the icon to be changed as well as application of animation or rotation effects to the icon.
Adding a ‘Font Awesome’ Icon
- After logging into a site’s admin panel, Edit the page a Font Awesome icon is to be added to.
- Edit a content block and place the curser where the icon is to be added.
- Click the Font Awesome button from the rich text toolbar.
- The Font Awesome Icon Selector will be displayed
- The available icons will be displayed in a grid. Clicking one of them will select the icon.
- The Filter field can be used to narrow the results. For example, type “arrow” in the filter field to display icons related to “arrow”.
- When satisfied with the icon appearance, click OK and the icon will be added to the Rich Text Editor.
- Save the new content in the Rich Text Editor to have it added to the page.
- Preview and Publish the page to see the changes on the live website.
How to change the Icon’s Appearance
The following steps explain how to change the appearance of the icon. As changes such as color, size, or rotation are made in the Icon Selector window, the formatting will be applied and displayed in the Selected Icon area of the window.
- The Size dropdown menu provides the ability to change the size of the icon.
- The Animate dropdown adds animation to the icon such as:
- Spin: the icon will revolve slowly,
- Pulse: the icon will revolve quickly in 45 degree increments.
- The Rotate/Flip dropdown allows the icon to be displayed at a different angle in 90 degree increments.
- The Change Color button opens a color selector window.
Note: If the desired color code is known, that can be added to the font color box in the Icon Selector window.
- The Show Border field will apply a border to the icon when selected.
- Selecting Fixed Width will make the default size for each icon the same. This is helpful when creating a list with icons stacked on each other because the icons and the text will be aligned, as shown here: