There are cases when flipbook appears but the buttons icons are not missing. Instead they look like square boxes.
Why this happens? #
DearFlip uses icons fonts to display the icons and the fonts are embedded in the CSS file, dflip.min.css. So the issue is related to:
- CSS content is missing (Square icons)
- CSS file missing (No icons)
CSS content is missing! #
This related to font details of CSS file dflip.min.css not added to page. Happens mostly when a minify CSS or combine CSS functions in cache/minify plugins try to handle the content of dflip.min.css.
How to Determine: For a quick check try disabling the cache/minify plugins in your site. Example: WP-Rocket, etc.
How to Fix: The fixes are specific to different plugins:
WP-Rocket: #
WP-Rocket removes the font-data from dflip.min.css when it combines the CSS to HTML output. We recommend to exclude the dflip.min.css file or disable the combine/minify/unused CSS feature.
Exclude dflip.min.css from Unused CSS: https://docs.wp-rocket.me/article/1831-preserve-certain-css-when-using-remove-unused-css#exclude-css-files
CSS File is missing! #
This is normally not the case. If CSS file is missing even square boxes won’t appear.
This relates to file dflip.min.css not loaded in the page. CSS and JS files are added by the theme or template. And in custom theme sometimes wp_head() function is missed. Thus CSS file is not loaded.
How to Determine: For a quick check the icons are working in WordPress default theme preview.
How to Fix: Make sure to include wp_head() in theme structure and templates.