Page 1 of 1
Modify download icon in article
Posted: 21 Oct 2026, 16:15
by fabio42
Hello!
In case anyone knows that, could you tell me how to modify the icon that is inserted by Phoca Download when you insert a file to be downloaded? The phoca icon is greyish with an arrow that points to the bottom.
Thanks in advance!
Fabrice
Re: Modify download icon in article
Posted: 21 Oct 2026, 17:58
by christine
Hi Fabrice,
Normally it’s:
“.../media/com_phocadownload/images/mime/16/icon-img.png”
or a PDF icon.
Can we see that somewhere?
Kind regards,
Christine
Re: Modify download icon in article
Posted: 21 Oct 2026, 18:17
by fabio42
that's the one I'm talking about! Once you insert a file with Phoca Download Button plugin, you get this, and this is not that lovely
I guess I'd better use css because if phoca is updated I will lose my modification? But what code should I use and where should I put it? custom.scss in my template?
Thanks in advance!
Re: Modify download icon in article
Posted: 21 Oct 2026, 19:29
by christine
fabio42 wrote: 21 Oct 2026, 18:17
I guess I'd better use css because if phoca is updated I will lose my modification?
Yes.
But what code should I use and where should I put it? custom.scss in my template?
Have you already uploaded a modified icon to the media library?
You should actually see this using the inspector. Then add the code (with the new icon path) to custom.css
Kind regards,
Christine
Re: Modify download icon in article
Posted: 21 Oct 2026, 19:41
by christine
Have a look at phocadownload.css, around line 52
You should see something like this there:
Code: Select all
.phocadownloadfile32 {
background: #fdfdfd url(../images/icon-download-32.png) 5px center no-repeat;
border: 1px solid #cccccc;
margin: 5px;
padding: 10px 10px 10px 40px;
}
and replace the icon that has been changed.
Into your custom.css
Kind regards,
Christine
Re: Modify download icon in article
Posted: 21 Oct 2026, 23:52
by gwhitlock64
worth remembering the 32 in .phocadownloadfile32 is the icon size, so if yours is showing the 16 or 48 version it'll be a different class in the css. Check in the inspector which one it's actually using before you override anything. Had a similar thing on a site once and the browser cache held onto the old icon for ages... proper wierd till I did a hard refresh.