How I can set Icons to the menü in TwentyTwentyOne

  • How can I set icons like Home or Mail instead of menu links? Yes I know in the options activate CSS, but which CSS class? In previous WP Themes, Icon Font Genericons was used. What is used this time. Or do I have to include my own library ore fontawsome?

Viewing 1 replies (of 1 total)

  • WordPress currently still uses Dashicons in the backend (although this is due to be replaced at some point in the future).

    To use Dashicons on the frontend of your site you can add this into your functions.php file …

    add_action('wp_enqueue_scripts', 'dashicons_enqueue_scripts');
function dashicons_enqueue_scripts() {
  if (!is_admin()) {
    wp_enqueue_style('dashicons');
  }
}

    … you can then change your menu item title to something like this …

    <span alt="Mail" class="dashicons dashicons-dashicons dashicons-email"></span>

    Twenty Twenty-One uses SVG icons for things like arrows or social media which are injected into the page as and when they are required and so cannot be easily re-used with CSS etc.

    You can upload your own svg icons to the Media Library and then use them by changing your menu item title to, for example …

    <img src="https://www.example.com/wp-content/uploads/2021/01/icon.svg" title="Mail" alt="Mail" />

    Hope that helps?

    Oliver

Viewing 1 replies (of 1 total)
  • The topic ‘How I can set Icons to the menü in TwentyTwentyOne’ is closed to new replies.

Tags