The current Dolphin version 7.3.3 includes Font Awesome version 4.5.0.
In the event that you are using another version, or a new version is available since this publication you need to verify what yours includes to determine which icons you can use. For example, if you have the current version that uses 4.5.0, then you can only add icons with support for 4.5.0 or less. In other words, you can't add icons that require Font Awesome version 4.7.0 until Boonex updates Dolphin with 4.7.0 or above.
So, you should double-check and verify which version you currently have.
To do so open the following file with a text editor, in your hosting control panel file-manager, etc.:
/templates/base/css/icons.css
Near the top of the file you will find a few lines of code that look like this:
@font-face {
font-family: 'sys-user';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
You can easily determine that the version is 4.5.0 by the ?v=4.5.0 part of the URL above.
Now we know we can only add Font Awesome Icons to the Navigation Menu that support 4.5 or less.
Open this Font Awesome cheatsheet here:
http://fontawesome.io/cheatsheet/
Scroll down to the actual icons. Towards the right of some you will notice: 4.0, 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7, etc. This means the particular icon requires that version. Since the current Dolphin includes 4.5.0, we can't use any that have: 4.6, 4.7, or greater next to it.
Now from within your Dolphin Administration navigate to:
Builders
-> Navigation Menu
Click on one of the top level blocks (purple'ish / blue'ish) in the "Active items" area.
A window/box will open.
You add your Font Awesome Icon to the "Picture" field like:
And, save the changes of course.
Refresh your website/page to verify the changes.
IMPORTANT NOTE:
For Dolphin you omit the "fa-" part.
So: fa-file
Becomes: file
Here is a side by side screen shot. The Dolphin Administration and The Font Awesome Cheatsheet:
And, here it is on the front end:
Now let's change it to something else.
I will use "fa-newspaper-o" this time.
So, I remove the "fa-" part and simply enter:
newspaper-o
After refreshing the front-end:
Problems:
You might clear your Dolphin cache, any external caching such as Cloudflare (or similar), and even your web browser cache if they don't seem to be changing.
Otherwise, double-check that you have followed the steps correctly.
And finally, try setting the first 2nd level "Active items" (green'ish) block, the one below the top level (purple'ish / blue'ish) block to a picture/icon.
So, either remove the picture / icon field for the first green block, or set the picture field exactly the same as the top level (purple'ish / blue'ish) block, or even set additional Font Awesome Icons for each green block.