Magento 2 : How reduce size of fotoroma gallery icons on product detail page
-
22-01-2021 - |
Question
I would like to reduce size of following icons appearing on detail page, enabled native fotoroma widget. 1. Fotoroma plus icon and minus icon 2. Fotoroma close icon
<var name="magnifier">
<var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)-->
<var name="top">5</var> <!-- Top position of magnifier -->
<var name="left">780</var> <!-- Left position of magnifier -->
<var name="width">200</var> <!-- Width of magnifier block -->
<var name="height">200</var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
<var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
</var>
Solution
The icons actually come by cropping a weird background which contain all the icons, located here - pub/static/frontend/Magento/luma/en_US/mage/gallery/gallery.png
so you will have to adjust background-size, background-position and width and height of following elements to get your desired size of icons. Adjust your code as follows (done for + icon)
.fotorama__fullscreen .fotorama__zoom-in {
background-position: 0 0 !important;
background-size: 126px;
top: 0;
}
fotorama__zoom-in.zoom-in-loaded {
height: 16%;
width: 4%;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange