How to set the font-awesome icon size of toolbar icons

  • Posts: 26
  • Thank you received: 0
  • Hikashop Business
5 years 4 months ago #300902

-- HikaShop version -- : 4.0.1
-- Joomla version -- : 3.9
-- PHP version -- : 7.x
-- Browser(s) name and version -- : Chrome 70
-- Error-message(debug-mod must be tuned on) -- : no error

in components/com_hikashop/views/toolbar/tmpl/default.php line 41 I notice that the size of an icon can be set.
$fa_size = !empty($tool) ? (int)$tool : 2;

But where in the gui can this size be set?
Since the size is not set, the default value of 2 is used.
Using this value the icons are too big.

Please Log in or Create an account to join the conversation.

  • Posts: 26000
  • Thank you received: 4004
  • MODERATOR
5 years 4 months ago #300904

Hello,

The icon size are still relative to what your template is setting.
So using a simple CSS rule, you can change the base font-size and reduce your toolbar icons.
There is no need to touch the PHP, only some CSS.

www.hikashop.com/support/documentation/1...the-display.html#css

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 17
  • Thank you received: 1
5 years 4 months ago #300959

Hi Jerome,

Without the setting there is a class added fa-2x
I don't want this class to be set... so I have to change the privided size.
Creating a css rule overriding the fa-2x for this icon is overkill.

regards,
Hans

Please Log in or Create an account to join the conversation.

  • Posts: 4508
  • Thank you received: 610
  • MODERATOR
5 years 4 months ago #300970

Hello,

I get your point, but you have to note several elements :
- All the fontawesome icons haven't the same size, I mean some icon are bigger than other and so we have for some of them to define them with the fa-3x and other with the fa-2x.

This is why you can see this condition to define different size in order to have homogeneous icons with each other, and as you have probably noticed some of the Customer panel icons are build with several fontawesome icons, and so size and position are adjusted.
Modify these size and parameters is possible of course, but can take time and can be complicated.

For modify this, you can modify your code in components/com_hikashop/views/toolbar/tmpl/default.php, by creating an override (from Main HikaShop Configuration in Display dropdown => Custom Fields) in order to remove this conditions.

- By using the Css and a general selector you can at the same time modify all the Icon size AND keep the proportions with a single css command, with by example this kind of code :

.hika_cpanel_icons .hk-icon {
    font-size: 24px;
}

But of course, you are free to select among these 2 possibilities.
Regards

Last edit: 5 years 4 months ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 17
  • Thank you received: 1
5 years 4 months ago #301014

it doesn't seems logical for me.
You are coding a check if a certain variable is set, if not provide a default setting.

```
$fa_size = !empty($tool) ? (int)$tool : 2;
```

And if I want know how and where I can set the variable the answer I get is to override it with removing the default fallback or to hack around with css.

The toolbar is called from somewhere with a set of icons to be shown.
Can I adjust this call without changing css nor create an override on toolbar/tmpl/default.php ?


Found it...
the back button icon on view = address is called from views/address/view.html.php line 93
```
$this->toolbar = array(
'back' => array(
'icon' => 'back',
'name' => JText::_('HIKA_BACK'),
'url' => hikashop_completeLink('user&task=cpanel&Itemid='.$Itemid),
'fa' => array('html' => '<i class="fas fa-arrow-circle-left"></i>')
)
);
```

it seems that 'size' is not present in the 'fa' array and therefor cannot be set nor changed.
It would be cool and useful if this can be set in Hikashop backend.
Not by creating an override on toolbar, since there is no issue with it.

Please Log in or Create an account to join the conversation.

  • Posts: 4508
  • Thank you received: 610
  • MODERATOR
5 years 4 months ago #301016

Hello,

We understand but create a specific option for define dynamically the Icon size seems to be abusive, because most often you define this when you design your website and don't have to change it later.
Plus, HikaShop is an E-commerce solution, not a template, the aesthetic isn't our main point.
And as you can understand it, HikaShop and e-commerce in general required a lot of options...

That's why in our mind, define it via a custom (css, html or php) seems to be legit.
Regards

Please Log in or Create an account to join the conversation.

  • Posts: 17
  • Thank you received: 1
5 years 4 months ago #301091

Since I work with both Joomla and Magento I know how complex an e-commerce solution can be.
I also know that Magento has a lot more options than Hikashop and all of them can be changed, set or overridden on a performance way.

I was hoping that I could do the same with Hikashop.
Too bad that it is not possible yet.
I will have to add extra lines of css to get the same result. Thank you for your time. It would be very nice if Hikashop will be more configurable / customizable in the future. Keep up the good job your doing already.

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

Time to create page: 0.082 seconds
Powered by Kunena Forum