Tutorial

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.
Font Awesome Versions

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:
Font Awesome Example Dolphin Pro Front End

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:
version comparison

And, here it is on the front end:
Front End Example

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

Font Awesome newspaper-o

After refreshing the front-end:
newspaper-o Dolphin Pro 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.

 

 
Written By
Tutorial by: Jeremy LeSarge (AKA Ray)

I am the owner and administrator of DialMe.com. I write Tutorials for Boonex Dolphin as well as tips and resources surrounding website programming and development. I enjoy working with WordPress, SEO, and Web Hosting / Servers. I also maintain a WordPress Blog here on this site where you will find a variety of technology and webmaster resources.

Actions
Recommend
Sponsored Links