Font Awesome for Opencart

Here's a quick guide of how to add Font Awesome to your opencart installation. With font awesome you'll have a vector icon set at your fingertips - anything from email & social icons to an icon for a jet fighter! So thankyou very much Dave Gandy for Font Awesome, such a great resourse.

Download Font Awesome

Head over to Font Awesome on github. Downlaod and extract the files. Create a folder named font-awesome in the root of your opencart install. Copy the folders font & css across from your download to your newly created folder.

Edit your Opencart header template file

Now edit your header template file catalog/view/theme/*/template/common/header.tpl to point a link to your Font Awesome css file.

Look for <?php foreach ($scripts as $script) { ?> add the folling line before it.

<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css"/>

Play around and create

Now you can load up a whole selection of icons, for example,

<i class="icon-phone icon-2x"> Call us
Will render as ... Call us

Opencart Example

Documentation & Credit

Full documentation can be found at Font Awesome. It is not necessary to attribute Font Awesome when you use the icon set but it's a good way of letting others know about it.

Buy this mod in a handy vQmod file

  • No modification of core files.
  • Drag and drop installation process.
  • Requires vQmod.
  • Bonus - the vqmod file includes 5 icon assignments for your Opencart header just to get you started.

Get Font Awesome vqmod for Opencart now for only $1.99 USD (£1.194 or €1.4328). Pay now with paypal for an instant download link and email.

View demo