[Skip to main content](#vessel-content)

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

##

- **[perfectwebteam](/forum/user/34456-perfectwebteam "View perfectwebteam's Profile")**
- [![perfectwebteam's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34456.png)](/forum/user/34456-perfectwebteam "View perfectwebteam's Profile") Topic Author
- [ Offline](/forum/user/34456-perfectwebteam)

Less More

- Posts: 26
- Thank you received: 0
-
-
- [](https://perfectwebteam.nl/)
-

7 years 11 months ago [\#300902](#300902) by [perfectwebteam](/forum/user/34456-perfectwebteam "View perfectwebteam's Profile")  *[How to set the font-awesome icon size of toolbar icons](/forum/4-how-to/896316-how-to-set-the-font-awesome-icon-size-of-toolbar-icons#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&#95;hikashop/views/toolbar/tmpl/default.php line 41 I notice that the size of an icon can be set. $fa&#95;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.")* was created by *[perfectwebteam](/forum/user/34456-perfectwebteam "View perfectwebteam's Profile")*

-- 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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg5NjMxNi1ob3ctdG8tc2V0LXRoZS1mb250LWF3ZXNvbWUtaWNvbi1zaXplLW9mLXRvb2xiYXItaWNvbnM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Jerome](/forum/user/80-jerome "View Jerome's Profile")**
- [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile")
- [ Offline](/forum/user/80-jerome)
- HikaShop core developer

Less More

- Posts: 26394
- Thank you received: 4078
-
- [](http://obsi.dev)
-

7 years 11 months ago [\#300904](#300904) by [Jerome](/forum/user/80-jerome "View Jerome's Profile")  Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[How to set the font-awesome icon size of toolbar icons](/forum/4-how-to/896316-how-to-set-the-font-awesome-icon-size-of-toolbar-icons#300904 "-- 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&#95;hikashop/views/toolbar/tmpl/default.php line 41 I notice that the size of an icon can be set. $fa&#95;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.")*

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](https://www.hikashop.com/support/documentation/153-customize-the-display.html#css)

Regards,

---

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

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg5NjMxNi1ob3ctdG8tc2V0LXRoZS1mb250LWF3ZXNvbWUtaWNvbi1zaXplLW9mLXRvb2xiYXItaWNvbnM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[hans2103](/forum/user/34768-hans2103 "View hans2103's Profile")**
- [![hans2103's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34768-hans2103 "View hans2103's Profile")
- [ Offline](/forum/user/34768-hans2103)

Less More

- Posts: 17
- Thank you received: 1
-
-

7 years 10 months ago [\#300959](#300959) by [hans2103](/forum/user/34768-hans2103 "View hans2103's Profile")  Replied by *[hans2103](/forum/user/34768-hans2103 "View hans2103's Profile")* on topic *[How to set the font-awesome icon size of toolbar icons](/forum/4-how-to/896316-how-to-set-the-font-awesome-icon-size-of-toolbar-icons#300959 "-- 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&#95;hikashop/views/toolbar/tmpl/default.php line 41 I notice that the size of an icon can be set. $fa&#95;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.")*

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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg5NjMxNi1ob3ctdG8tc2V0LXRoZS1mb250LWF3ZXNvbWUtaWNvbi1zaXplLW9mLXRvb2xiYXItaWNvbnM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Philip](/forum/user/34318-philip "View Philip's Profile")**
- [![Philip's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34318_2015-11-18-2.png)](/forum/user/34318-philip "View Philip's Profile")
- [ Offline](/forum/user/34318-philip)

Less More

- Posts: 4820
- Thank you received: 654
-
-

7 years 10 months ago -  7 years 10 months ago [\#300970](#300970) by [Philip](/forum/user/34318-philip "View Philip's Profile")  Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[How to set the font-awesome icon size of toolbar icons](/forum/4-how-to/896316-how-to-set-the-font-awesome-icon-size-of-toolbar-icons#300970 "-- 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&#95;hikashop/views/toolbar/tmpl/default.php line 41 I notice that the size of an icon can be set. $fa&#95;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.")*

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 =&gt; **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 : Code:

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

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

Last edit: 7 years 10 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg5NjMxNi1ob3ctdG8tc2V0LXRoZS1mb250LWF3ZXNvbWUtaWNvbi1zaXplLW9mLXRvb2xiYXItaWNvbnM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[hans2103](/forum/user/34768-hans2103 "View hans2103's Profile")**
- [![hans2103's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34768-hans2103 "View hans2103's Profile")
- [ Offline](/forum/user/34768-hans2103)

Less More

- Posts: 17
- Thank you received: 1
-
-

7 years 10 months ago [\#301014](#301014) by [hans2103](/forum/user/34768-hans2103 "View hans2103's Profile")  Replied by *[hans2103](/forum/user/34768-hans2103 "View hans2103's Profile")* on topic *[How to set the font-awesome icon size of toolbar icons](/forum/4-how-to/896316-how-to-set-the-font-awesome-icon-size-of-toolbar-icons#301014 "-- 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&#95;hikashop/views/toolbar/tmpl/default.php line 41 I notice that the size of an icon can be set. $fa&#95;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.")*

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

&#96;&#96;&#96;
$fa_size = !empty($tool) ? (int)$tool : 2;
&#96;&#96;&#96;

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
&#96;&#96;&#96;
$this-&gt;toolbar = array(
'back' =&gt; array(
'icon' =&gt; 'back',
'name' =&gt; JText::_('HIKA_BACK'),
'url' =&gt; hikashop_completeLink('user&amp;task=cpanel&amp;Itemid='.$Itemid),
'fa' =&gt; array('html' =&gt; '&lt;i class="fas fa-arrow-circle-left"&gt;&lt;/i&gt;')
)
);
&#96;&#96;&#96;

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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg5NjMxNi1ob3ctdG8tc2V0LXRoZS1mb250LWF3ZXNvbWUtaWNvbi1zaXplLW9mLXRvb2xiYXItaWNvbnM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Philip](/forum/user/34318-philip "View Philip's Profile")**
- [![Philip's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34318_2015-11-18-2.png)](/forum/user/34318-philip "View Philip's Profile")
- [ Offline](/forum/user/34318-philip)

Less More

- Posts: 4820
- Thank you received: 654
-
-

7 years 10 months ago [\#301016](#301016) by [Philip](/forum/user/34318-philip "View Philip's Profile")  Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[How to set the font-awesome icon size of toolbar icons](/forum/4-how-to/896316-how-to-set-the-font-awesome-icon-size-of-toolbar-icons#301016 "-- 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&#95;hikashop/views/toolbar/tmpl/default.php line 41 I notice that the size of an icon can be set. $fa&#95;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.")*

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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg5NjMxNi1ob3ctdG8tc2V0LXRoZS1mb250LWF3ZXNvbWUtaWNvbi1zaXplLW9mLXRvb2xiYXItaWNvbnM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[hans2103](/forum/user/34768-hans2103 "View hans2103's Profile")**
- [![hans2103's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34768-hans2103 "View hans2103's Profile")
- [ Offline](/forum/user/34768-hans2103)

Less More

- Posts: 17
- Thank you received: 1
-
-

7 years 10 months ago [\#301091](#301091) by [hans2103](/forum/user/34768-hans2103 "View hans2103's Profile")  Replied by *[hans2103](/forum/user/34768-hans2103 "View hans2103's Profile")* on topic *[How to set the font-awesome icon size of toolbar icons](/forum/4-how-to/896316-how-to-set-the-font-awesome-icon-size-of-toolbar-icons#301091 "-- 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&#95;hikashop/views/toolbar/tmpl/default.php line 41 I notice that the size of an icon can be set. $fa&#95;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.")*

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](/forum/user/34318-philip "View Philip's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg5NjMxNi1ob3ctdG8tc2V0LXRoZS1mb250LWF3ZXNvbWUtaWNvbi1zaXplLW9mLXRvb2xiYXItaWNvbnM/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop- Install &amp; Update- Product &amp; Category Display- Content Creation- Sales and Orders- - Orders management- - Reports &amp; Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import &amp; Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel &amp; Slider- - Mass Actions- - Filters &amp; Search- - Discount &amp; Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.382 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)

[](#top)
