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?– LodderOct 16, 2015 at 15:44
-
Default icons - like print, edit, email. They come with standard joomla 3 installation.– aretaiOct 16, 2015 at 16:57
-
You can either edit the CSS file for the template, or edit the layout– LodderOct 16, 2015 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?– aretaiOct 16, 2015 at 18:04
Add a comment
|
1 Answer
There are two types of icons:
- Images (legacy icons)
- 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– aretaiOct 17, 2015 at 2:55
-
1You'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. Oct 17, 2015 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– aretaiOct 18, 2015 at 22:07
-
Consider using Firebug to determine if your styling is applied, and if something might be overriding it. Oct 19, 2015 at 5:46