Modify download icon in article

[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

[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

[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!

[christine]

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

[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

[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.