Checked Icon will not appear in WordPress 5.3 Backend

  • After updating to WordPress version 5.3, the icon for activated checkboxes will no longer be displayed. I get a weird symbol over the box. That is very irritating.

    In the source code this is displayed here:

    
input [type = "checkbox"]: checked :: before {
    content: "\ f147";
    color: # 1e8cbe;
    width: auto;
}

    This is displayed as “font-familiy”:

    font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica New”, sans-serif;

    That will probably be the problem or?

    How do I get the right symbols again?

    Best Regards
    Gloria

    • This topic was modified 5 years, 3 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not a Requests and Feedback topic
Viewing 4 replies - 1 through 4 (of 4 total)

  • the code content:”\f147″ is the symbol that should be loading. You don’t list any of the font-family in the css rule. It should state what family it needs to be loaded.

    font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica New”, sans-serif;

    you need to add it back to your rule. The fonts should be enqueued in your functions.php file.

    You are using apple system fonts with fall back fonts. If people from other platforms other then apple are going to view the page they may get a different symbol.The browser will select what font it thinks will fits the best and use it. you might want to consider changing to something like font-awesome or google fonts.

    • This reply was modified 5 years, 3 months ago by mrtom414.
    • This reply was modified 5 years, 3 months ago by mrtom414.
    Thread Starter gglaser

    (@gglaser)

    Hello MrTom,
    Thank you for the feedback.

    I have not deposited any fonts here. I’m still sitting on a Windows PC and not on a Mac, so I would not even think of using an “Apple Sytem” font. This information:

    input [type = “checkbox”]: checked :: before {
    content: “\ f147”;
    …
    }

    is in the “admin.css” and this:

    body {
    font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica New”, sans-serif;
    …
    }

    in the load-styles.css.

    I did not change anything or load anything else!

    Where should the fonts be stored in the function.php?
    I found no information about downloaded fonts?

    Best Regards
    Gloria

    Really depends on the fonts you want to use. Many people use font-awesome they have a cdn that you can enqueue in the functions.php. If you want to download the fonts and put them in your site you can add them in the style.css file. You would have to determine what font family you want to use. You can check out font awesome to see if they have any symbols that you like https://fontawesome.com/icons?d=gallery. If you want to use a different font and want to add it in your style.css check this link out. https://www.w3schools.com/css/css3_fonts.asp. It explains how to add the fonts using just css. Font awesome has a cdn that you can get here https://fontawesome.com/start. They will email you a link for the cdn to use. This page will explain how to use font-awesome in the pseudo elements like ::before and ::after https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements. Also, take note that if you choose font awesome there are different libraries of symbols you have to make sure to pick the right library.

    Thread Starter gglaser

    (@gglaser)

    Thank you very much for the detailed explanation. I already know how to integrate fonts in CSS. I’m just kidding, why I see no checkbox hook in the backend. I’ll see how I get it back!

    Thanks again for your help!

    Best Regards
    Gloria

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Checked Icon will not appear in WordPress 5.3 Backend’ is closed to new replies.