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.
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.
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?
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
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.
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
Dang! I forget the `content` property. That’s kind of important. 🙂
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://
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.
I was thinking something like this in Custom link.
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.
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.
That’s true about empty HTML element. I don’t like it either. Maybe we should just start using SVG.
https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html
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?
You have to go to Appearance > Menus to edit the items in your menus.
Got it. Thanks!