5

I am building my own component and I would like to add my icons/images left of the Title in the administrative pages of the component (backend), like the core components have.

enter image description here

How to do this?

6

You can define a class for the Header Title of your view, while creating the toolbar for your view within the view.html.php.

Within your "addToolbar()" function, you can call the JToolbarHelper::title() method, and specify a second paramater (string) to define a CSS class to the toolbar title, with a prefix of "icon-".

Example:

JToolbarHelper::title(JText::_('COM_MYCOMPONETE_LIST_ITEMS'), 'myclass');

This will result to the following html:

<h1 class="page-title">
    <span class="icon-myclass"></span>
    My Componete: List Items
</h1>

You can actually type more than one words separated by space, and these will be added as extra classes.

You can then include in your component's css file, the rule for your class and specify your background image. The location of your css and images file should be in the Media folder.

For example:

media/mycomponent/images/

media/commycomponent/css/admin.styles.css

However keep in mind that in Joomla 3, it is a common practice to not use images, rather than using the css pseudo element ::before with the CSS "content" attribute, taking advantage of the icomoon font by Fontawesome that is already loaded in the admin template (and you can find it here: "media/jui/fonts/").

The CSS Example below, will add the "Home" icon, left of Title of the view:

.icon-myclass::before {
    content: "\0021"; 
}
  • "\0021" is the unicode for exclamation mark (!) */
  • 1
    You can also use Font Awesome icons. Just replace the second parameter of JToolbarHelper::title() with the name of icon. Here is a list of these icons: fortawesome.github.io/Font-Awesome/icons. Don't forget to remove the fa- part. This font and relative css classes is loaded by default in default admin template. – Farahmand Nov 13 '14 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.