Using Fontawesome icon on Joomla backend

    Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
     

    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.

    Using Fontawesome icon in joomla

    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
    }

     

    Please publish modules in offcanvas position.