The OceanWP WordPress theme allows you to add a top bar to your website, where you can add additional info, such as your phone number, email, address, and so on.

The process is easy, but first, you have to know how to do it, and many of you don’t know.

So, in this tutorial, I’ll show you two different ways to add Font Awesome icons to the top bar of your OceanWP theme.

1. Add Font Awesome icons to OceanWP’s top bar via Customize

Step 1

Go to Font Awesome version 4.7, select an icon, and copy its code.

Important! Don’t choose Font Awesome icons from the latest version (5) because OceanWP doesn’t support them yet, so they won’t appear!

Step 2

Go to Appearance > Customize > Top Bar > Content.

Step 3

Paste the Font Awesome icon code in the top bar’s Content box and add your text next to it.

Leave a blank space after the </i> closing tag so that the icon and text won’t stick together.

Step 4

Click on the Publish button for the changes to take effect.

2. Add Font Awesome icons to OceanWP’s top bar using Ocean Extra

Ocean Extra is a free plugin that adds more features to the OceanWP theme.

One of those features is the Theme Panel, where you can create different templates.

Step 1

After you install the plugin, go to Theme Panel > My Library > Click the Add New button at the top.

Step 2

Add a title to the template (e.g. Top Bar Content), then add the Font Awesome icon code and text (in the Text editor, not Visual), as you saw above.

Publish the template.

Step 3

Go to Appearance > Customize > Top Bar > Content.

Now, instead of adding content in the box, you simply select the template from the drop-down menu.

Step 4

Click on the Publish button for the changes to take effect.

That’s it!

If the changes don’t take effect after clicking the Publish button and refreshing your browser window, clear your website and browser cache.

The first method is simpler, but this one offers you more flexibility in case you are not familiar with HTML and you’ll need the help of the editor’s toolbar.

For example, you can make the text bold or hyperlink it.

By the way, after you paste the Font Awesome code, it’s safe to switch to the Visual editor, where more features will appear in the editor’s toolbar (e.g. “Text color”).

Just make sure that you won’t accidentally delete the icon because it won’t be visible in the Visual editor.

That’s a wrap

I hope you found the post comprehensive and managed to successfully add Font Awesome icons to the top bar in your OceanWP theme!

Don’t forget to share the post to help out others!

You can quickly subscribe to my newsletter by using this link.

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

My WordPress services are at your disposal!