How to add a HOME icon (minus the text) to the primary navigation menu bar

11 Replies ·

  1. Hello,

    I’m hoping someone has accomplished this before please:

    I would like to add a Home (genericons?) icon to the primary navigation menu bar.

    I do not want the associated “Home” text included though.

    I am using the Stargazer theme.

    Thank you very much!

    Marcus Tibesar
    Tibesar Family Archives
    https://tibesar.com

  2. Justin Tadlock

    When adding your menu item, use this for the “Navigation Label”:

    `
    Home
    `

    Then, add this to the “CSS Classes” box:

    `
    icon-home
    `

    Then, add this to your `style.css`:

    `
    #menu-primary .icon-home a::before {
    display: inline-block;
    font-family: ‘Genericons’;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    line-height: 1;
    vertical-align: middle;

    -webkit-font-smoothing: antialiased;
    }
    `

    The CSS made need a bit of adjusting. The theme’s menus were not designed for this, but the code should get things rolling.

  3. Marcus Tibesar

    Hello Justin,

    Sorry for my delay.

    The home icon wasn’t appearing (although the link was there hidden) so, I added the following additional property to the style.css:

    content: '\f409’;

    The home icon is now there and working great.

    This is very much appreciated Justin!

    Marcus Tibesar
    Tibesar Family Archives
    https://tibesar.com

  4. Marcus Tibesar

    It works great Justin. I up’d it to 32px and colored the font. It really lines up well and looks great.

    Thank you very much!

    Sidebars:

    The custom header plugin plus this stargazer theme is absolutely stunning. I initially thought the full sized photo at the top of each Page or even Post was overblown but, as I began adding high quality photos to the Page/Post custom headers it is absolutely jaw dropping presentation.

    Hope your farm is prospering this growing season.

    Cheers!

    Marcus Tibesar
    Tibesar Family Archives
    https://

  5. Sami Keijonen

    I have an idea for this one without CSS and could be even more accessible.

    I’m on my mobile right now so remind me if I don’t remember to check back.

  6. Sami Keijonen

    I was thinking something like this in Custom link.

    <span class="genericon genericon-home" aria-hidden="true"></span><span class="screen-reader-text">Home</span>

    You might need to style it (bigger font size) using inline styles or add extra class to first span.

    The idea is from Joe Dolson’s reply in accessebility post.

    I can check from Joe and David is that good way of doing it for. Anyways that’s what I’m doing for menu toggle buttons now.

  7. Justin Tadlock

    While I generally agree with Joe on things about accessibility, this is something that’s hard to get on board with for me. I’ve read that post and understand the reasoning, but empty HTML elements littered throughout the document just seems wrong to me. Icons are often purely stylistic and should be handled completely via CSS.

    I know the `content` property can be used for adding content, but most often this is cosmetic content. Actual content should be a part of the document, not the stylesheet. There are articles upon articles on the Web though discussing the merits of the `content` property.

    To me, we’re just taking one problem and replacing it with another problem.

    I don’t think `speak: none;` is widely supported, but that might be something to look into.

  8. MellowW

    I have a different problem. I tried to add a HOME button to my navigation bar by adding a new page. I quickly discovered that’s not the way to go. I deleted the page but HOME still appears on the nav bar. How do a make it go away?