Changing button icons

Want the PDF viewer toolbar icons to match your site’s visual style? The default toolbar icons are PNG files stored in the plugin’s /img/ directory, and you can swap any of them out by uploading replacement images and pointing the relevant CSS selectors to the new file paths.

This guide covers which CSS selectors control each toolbar button icon, how to override them with custom images, and how to handle the full-screen minimize button as a special case.

---

How button icons work

Each toolbar button pulls its icon from a PNG file in the plugin’s /img/ directory using a CSS content: url() declaration. To replace an icon, upload your replacement image to the WordPress Media Library, then override the corresponding CSS selector with the new URL.

Replacing standard toolbar button icons

The CSS selectors for each button are listed below. For each one, replace the url() value with the URL of your uploaded image.

/* DOWNLOAD BUTTON IMAGE CSS */
div.pdfemb-toolbar button.pdfemb-download::before {
    content: url(../img/toolbarButton-download.png);
}

/* ZOOM OUT BUTTON IMAGE CSS */
div.pdfemb-toolbar button.pdfemb-zoomout::before {
    content: url(../img/toolbarButton-zoomOut.png);
}

/* ZOOM IN BUTTON IMAGE CSS */
div.pdfemb-toolbar button.pdfemb-zoomin::before {
    content: url(../img/toolbarButton-zoomIn.png);
}

/* PREV PAGE BUTTON IMAGE CSS */
div.pdfemb-toolbar button.pdfemb-prev::before {
    content: url(../img/toolbarButton-pageUp.png);
}

/* NEXT PAGE BUTTON IMAGE CSS */
div.pdfemb-toolbar button.pdfemb-next::before {
    content: url(../img/toolbarButton-pageDown.png);
}

/* FULLSCREEN BUTTON IMAGE CSS */
div.pdfemb-toolbar button.pdfemb-fs::before {
    content: url(../img/toolbarButton-presentationMode.png);
}
Code language: CSS (css)

Swap only the selectors you need to change. Leave the rest untouched.

Replacing the full-screen minimize button icon

The minimize button (shown inside fullscreen mode) uses a separate selector. Upload your icon image to the Media Library, copy its URL, and substitute it in the snippet below:

/* CHANGE FS MINIMIZE BUTTON ICON */
div.pdfemb-toolbar button.pdfemb-toggled::before {
  content: url(https://example.com/wordpress/wp-content/uploads/xxxx/xx/toolbarButton-presentationMode_minimize.png) !important;
}
Code language: CSS (css)

Replace the URL in the content value with the full URL of your uploaded image file.

Hiding the full-screen button entirely

If you want to remove the full-screen button rather than swap its icon, use this CSS. The media query targets mobile widths so users on small screens can still exit full screen if they enter it:

/* HIDE FULL-SCREEN BUTTON */
@media only screen and (max-width:380px) {
  button.pdfemb-fs {display: none !important;}
}
Code language: CSS (css)

Adding custom CSS to your site

Add any of the above snippets using one of these methods:

• Classic themes: Go to Appearance > Customize > Additional CSS and paste the CSS there.
• Block themes: Use a custom CSS plugin, or add styles via the Styles panel in the Site Editor.
• Child theme: Add the rules to your child theme’s style.css file.