2

A really quick question...
Is there any setting that can change the size of the default Joomla 3 icons? I know I can upload bigger pictures, but it is quite tedious.

Anyone knows how to achieve that in a faster automatic way?

thank you

  • Which icons are you referring to? – Lodder Oct 16 '15 at 15:44
  • Default icons - like print, edit, email. They come with standard joomla 3 installation. – aretai Oct 16 '15 at 16:57
  • You can either edit the CSS file for the template, or edit the layout – Lodder Oct 16 '15 at 17:13
  • I tried to find these values in css files for the template, but failed, which place in the layout should I change to increase their size? – aretai Oct 16 '15 at 18:04
4

There are two types of icons:

  1. Images (legacy icons)
  2. CSS class

Two templates that come with Joomla 3.x can be used as a good example of this, beez3 uses images, and protostar uses CSS classes. By the way default way is CSS class, so this is the simplest way to do it:

.icon-print, .icon-envelope{
    font-size: 24px;
}

And you've got yourself some really big icons. Also reading this will help you to understand how you override Joomla components and modules: https://docs.joomla.org/Understanding_Output_Overrides

  • Thank you for answer. I tried to add the code to template.css via template manager, but icons still appear same size (using beez3). In that case do I need to upload bigger icons after all (since beez3 uses images)? Thank you – aretai Oct 17 '15 at 2:55
  • You've misunderstood me, if you are using beez3 than the icons are PNGs so you can't make them larger by CSS (well maybe you can stretch them but that's not the best way to do it) Go to: templates/beez3/html/com_content/article/default.php In there you will find code that sets how icons are shown: echo JHtml::_('icon.print_popup', $this->item, $params, array(), true); Replace true with false and you will have CSS icons which are much easier to manipulate. – Alexxandar Oct 17 '15 at 8:39
  • I tried to do the way you suggested. Where do I need to add the css code you suggested? I've tried in template.css but doesn't work – aretai Oct 18 '15 at 22:07
  • Consider using Firebug to determine if your styling is applied, and if something might be overriding it. – Alexxandar Oct 19 '15 at 5:46

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.