Skip to content

Instantly share code, notes, and snippets.

@justintadlock
Last active January 11, 2024 14:52
Show Gist options
  • Save justintadlock/6947bb0b99506f94201d08ed7f633db3 to your computer and use it in GitHub Desktop.
Save justintadlock/6947bb0b99506f94201d08ed7f633db3 to your computer and use it in GitHub Desktop.
Font Awesome icon for WordPress menu item.
/*
* I'm specifically targeting a URL here, but I'd recommend using a custom
* CSS class for the Navigation Link block instead.
*/
.wp-block-navigation-link a[href*="/my-account"]::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.5em;
/* Font Awesome user icon: https://fontawesome.com/icons/user?f=classic&s=solid */
background: no-repeat url( 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>' );
}
/*
* This is used to hide the label but allow it for screen readers. Use whatever
* your preferred CSS is here. Again, I'm targeting the URL, but a specific CSS
* class would work best. You'd probably also want to add a bit of code for focus.
*/
.wp-block-navigation-link a[href*="/my-account"] .wp-block-navigation-item__label {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment