Skip to main content
deleted 4 characters in body
Source Link
Vivek Kumar
  • 5.7k
  • 2
  • 24
  • 53

The icons actually come from aby 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%;
}

The icons actually come from a 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%;
}

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%;
}
Source Link
Vivek Kumar
  • 5.7k
  • 2
  • 24
  • 53

The icons actually come from a 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%;
}