Nav Arrows on site disappeared and icons on admin toolbar

wordpress

#1

Not sure if it is a font awesome issue or what. I added code from WP Rocket support and it isn’t working. I also installed the Cloudflare plugin and shut off the WP rocket tab for clouflare and no luck.

Any insight would be appreciated,

Randy


#2

If I shut off Cloudflare the problem goes away.


#3

You are overriding FontAwesome in your CSS by:

font-family: opendyslexic !important;

You can test it in your browser’s inspector and uncheck the above line.
If disabling CF fixed the problem you need to clear cache in your CF panel.


#4

Thank you I’ll try that :wink:


#5

Ok I can’t seem to find it to delete it. What file vis FTp would I go to in WP folders?


#6

Also I did clear the cache in CF but it didn’t solve the issue. Thats was before trying to delete font-family: opendyslexic !important;


#7

css choices

/public_html/wp-includes/css
/public_html/wp-includes/css/admin-bar-rtl.css
/public_html/wp-includes/css/admin-bar-rtl.min.css
/public_html/wp-includes/css/admin-bar.css
/public_html/wp-includes/css/admin-bar.min.css
/public_html/wp-includes/css/buttons-rtl.css
/public_html/wp-includes/css/buttons-rtl.min.css
/public_html/wp-includes/css/buttons.css
/public_html/wp-includes/css/buttons.min.css
/public_html/wp-includes/css/customize-preview-rtl.css
/public_html/wp-includes/css/customize-preview-rtl.min.css
/public_html/wp-includes/css/customize-preview.css
/public_html/wp-includes/css/customize-preview.min.css
/public_html/wp-includes/css/dashicons.css
/public_html/wp-includes/css/dashicons.min.css
/public_html/wp-includes/css/editor-rtl.css
/public_html/wp-includes/css/editor-rtl.min.css
/public_html/wp-includes/css/editor.css
/public_html/wp-includes/css/editor.min.css
/public_html/wp-includes/css/jquery-ui-dialog-rtl.css
/public_html/wp-includes/css/jquery-ui-dialog-rtl.min.css
/public_html/wp-includes/css/jquery-ui-dialog.css
/public_html/wp-includes/css/jquery-ui-dialog.min.css
/public_html/wp-includes/css/media-views-rtl.css
/public_html/wp-includes/css/media-views-rtl.min.css
/public_html/wp-includes/css/media-views.css
/public_html/wp-includes/css/media-views.min.css
/public_html/wp-includes/css/wp-auth-check-rtl.css
/public_html/wp-includes/css/wp-auth-check-rtl.min.css
/public_html/wp-includes/css/wp-auth-check.css
/public_html/wp-includes/css/wp-auth-check.min.css
/public_html/wp-includes/css/wp-embed-template-ie.css
/public_html/wp-includes/css/wp-embed-template-ie.min.css
/public_html/wp-includes/css/wp-embed-template.css
/public_html/wp-includes/css/wp-embed-template.min.css
/public_html/wp-includes/css/wp-pointer-rtl.css
/public_html/wp-includes/css/wp-pointer-rtl.min.css
/public_html/wp-includes/css/wp-pointer.css
/public_html/wp-includes/css/wp-pointer.min.css


#8

Firefox has letters and numerals where the arrow icons should be


#9

I don’t recommend manually editing those files. Maybe a plug-in is forcing the style and disabling it fix the issue. As far as it refers to Cloudflare after fixing CSS problem clearing the cache would reflect the fix.
Your website suffers from multiple issues (check console tab in inspector) so you may better to refer to your developer to sort them out.
BTW if you are gonna do it yourself make sure you have back up of your files before editing them and look for any instance of font-family: opendyslexic !important; in CSS files and comment them out. You can search files by Notepad++ or similar editor using search in files option. After editing your local copy upload them to server and clear CF cache.


#10

Thank you


#11

You didn’t happen to enable the Opendyslexic app here at Cloudflare, did you?


#12

Good point by sdayman. I completely forget about CF apps. You need to disable them and troubleshoot.