Using Fontawesome icon on Joomla backend

Font Awesome gives us FREE scalable vector icons for our websites. In this article I will show you how to use it in Joomla back end of your component.

1. Include font-awesome.css to your component

You can include font-awesome.css to your component using addStyleSheet function, you can put it anywhere but usually in your view file. So edit your view.html.php and add this code in display function before parent::display($tpl);

public function display($tpl = null)
{
	//...
	$document =JFactory::getDocument();
	$document->addStyleSheet("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
	$document->addStyleSheet('components/com_example/assets/css/example.css'); //css for this component
	parent::display($tpl);
}

2. Update JToolBarHelper::title

Find the JToolBarHelper::title code in your view.html.php file and update the second parameter so that it’s using the following pattern: ‘componentname pagename‘, for example:

Before:

JToolBarHelper::title(JText::_('COM_EXAMPLE_TITLE_DOCUMENT'), 'document.png');

After:

JToolBarHelper::title(JText::_('COM_EXAMPLE_TITLE_DOCUMENT'), 'example document');

3. Update the css of your component

Now add this code to example.css to set the icon for document class

.icon-example:before {	
	font-family: 'FontAwesome' !important;	
}

.document:before{
	content:"\f15b";//using fa-file class
}