The easy way is to do it with css:
.library-viewer--file__icon.library-viewer--gif__icon,
.library-viewer--file__icon.library-viewer--jpg__icon,
.library-viewer--file__icon.library-viewer--png__icon{
width: 10px;
height: 10px;
background-image: url("the_url_of_img_icon");
}
You can replace the png or jpg for example with the file extension of your choice.
or you can use the filter lv_file_icon_html in order to replace the icon html with the html(img) of your choice.
Hope to help you 🙂
In which css file should I add this class? I have tried adding this to the assets/folders.css but the file icons did not appear.
Your help is really appreciated. Thanks.
You can add your css in
Themes > Customize > Additional CSS
Sorry to be such a nuisance, but I cannot get the file icon to show beside the file.
This is the shortcodes I have, and these seem to work.
[library-viewer have_file_access=”all” my_doc_viewer=”library-viewer”]
This is the css I added to the Themes -> Customize -> Additional CSS
.library-viewer–file__icon.library-viewer–gif__icon,
.library-viewer–file__icon.library-viewer–jpg__icon,
.library-viewer–file__icon.library-viewer–png__icon{
width: 10px;
height: 10px;
background-image: url(“https://citizen.on.ca//wp-content/plugins/library-viewer/assets/file-icon.png”); }
The website is citizen.on.ca and on the menu bar at the top, if you click Our Papers -> Archived, it will take you to the page where I want ta pdf image icon to appear beside the file.
Again thanks, and I hope I am not driving you too crazy.
.
In my last message there was a typo.
In the website backend the background-image line in the Advanced CSS appears as:
background-image: url(“https://citizen.on.ca//wp-content/plugins/library-viewer/assets/file-icon.png”); }
you need to change the extension. png are for images…
.library-viewer--file__icon.library-viewer--pdf__icon{
width: 10px;
height: 10px;
background-image: url("https://citizen.on.ca/wp-content/plugins/library-viewer/assets/file-icon.png");
}
If you need more help you can hire a developer or to ask GPT chat
