This article describes how you can work with Font Awesome icons
Introduction
Starting with version 31.2 you can use CSS without any graphics. In a future version, the XS platform will move away from using graphics for buttons, icons and so on completely. Font Awesome offers a huge number of greatly designed icons and social logos, of which the appearance can easily be changed by making changes to the CSS. We recommend that you make the switch to using Font Awesome rather sooner than later, and we are of course available to help you if you can’t do this yourself. Some newer functions are not supported unless you have made the change-over described in this article.
Note that article may no longer be relevant if your website is running on a version later than 31.2.
Visit the Font Awesome website for an overview of available icons and social logos.
How to
It is not recommended to make the changes described in this article if you have no knowledge of CSS. Please contact us if you need help.
If your website is on an earlier version of XS, then you can make the following changes to start using vector icons instead of graphics. Note that while you are making these changes, your website will not look as it did before until you have completed all steps.
A) Using all default settings (simple):
This method does not require you to add any custom CSS.
- Go to Site configuration, and click on Website style in the side bar.
– Open the section CSS options and tick both checkboxes (for media queries and custom check boxes and radio buttons).
– Open the section Font Awesome and select the radio button “Include fontawesome.min.css”.
– Open the section Button images and select the radio button “No images 2” (include Font Awesome
icons CSS).
– Scroll down and save your changes. - Open your website in a different browser tab (so that you can use both the editor and the client facing website at the same time).
– Check if everything is ok, and make adjustments to the custom CSS if necessary.
B) Make all changes manually (advanced):
This method requires you to add the custom CSS yourself.
- Go to Site configuration, and click on Website style in the side bar.
– Open the section Font Awesome and select the radio button “Include fontawesome.min.css”.
– Open the section Button images and select the radio button “No images”.
– Scroll down and save your settings. - In the Dashboard menu, click on Code editor.
– In the Select code dropdown, click on Custom CSS.
– Click on the Load example button in the toolbar.
– Click on the radio button for the file no-buttons-fontawesome.txt in the list.
– Click on the View code button, and then click on the Copy and close button, the CSS is now on your clipboard.
– Scroll down to the bottom of the custom CSS (there may not be anything in there) and paste the CSS (Ctrl-V on a PC or Cmd-V on a Mac).
– Make sure the Enable checkbox is checked at the top and click the Save button next to it to save the custom CSS. - Open your website in a different browser tab (so that you can use both the editor and the client facing website at the same time).
– Check if everything is ok, and make adjustments to the custom CSS if necessary.
Using different icons, and how to style your icons
If you have followed the steps described under A above, then the CSS for custom check boxes et cetera is already included. If you have chosen to use method B above, your website will now simply use Font Awesome icons instead of graphics that were used in the older CSS. This affects for example the icons underneath your thumbnails, the close buttons used in dialogs, the arrow buttons for pagination and so on.
Regardless of the choses method, the colors used for your icons can of course be changed via Site configuration, Website style, Color scheme. But you can also change colors for all or specific icons and buttons by changing the CSS in the code editor.
Below is an introduction re how to make changes to the CSS. If you understand how you can make the below changes, then it’s easy to completely change all the CSS that you have added for a custom appearance of the client facing website.
The CSS uses the pseudo elements ::before or ::after to specify which icon to use. To change the current icon to a different version, you’ll need to change the CSS. The below CSS shows the icon buttons that are displayed underneath the thumbnails:
Changing an icon
If for example you want to use a different icon for the “Add to lightbox” function, then you’ll need to replace the value “\f02e” to the code of the icon that you want to use. Let’s say that we want to change the current icon to a pin icon. On the Font Awesome website search for “thumbtack”, then click on the icon to open the details page. At the top of this page you’ll see that the code to use is “f08d”. In the custom CSS find the code “f02e” and replace it with “f08d” everywhere.
Changing the color and size of the icons
To change the color of the icons, simply add or change the “color” property in the CSS. So to change the color of the icons to red in the above example, add “color:red” to the .searchlinks a::after pseudo element.
To change the color of the thumbnail icon when you hover over it, add the following CSS (example):
To make the icon appear as a button, you can for example use a background color. E.g. for a black button with a white icon on it:
To change the size of an icon, simply change the font-size property:
