McShelby / hugo-theme-relearn

A theme for Hugo designed for documentation
https://mcshelby.github.io/hugo-theme-relearn/
MIT License
433 stars 187 forks source link

theme: page icon alignment #930

Closed sedyh closed 1 month ago

sedyh commented 1 month ago

Hello. I would like to be able to set icons for a page, as far as I can see they don't align if set on pages rather than chapters: image

If you try to align them using margin, the navigation will not respond to it.

menuPre = '<i style="margin: 0px 2px 0px 2px" class="fa-solid fa-sm fa-window-maximize"></i> '

image

Making text-align: center for <i> and its parent wrapper doesn't work here either.

McShelby commented 1 month ago

Use Font Awesome's fas fa-fw (fixed width) class for each icon:

<i class="fa-fw fas fa-home"></i> 
McShelby commented 1 month ago

Corrected code from my previous reply

sedyh commented 1 month ago

With fa-fw: image

McShelby commented 1 month ago

They only align on their menu level. fa-fw works great. See the exampleSite of the theme.

sedyh commented 1 month ago

I mean its not about the content level. It works for aligning, but this is about the mark that gets on the name. image

McShelby commented 1 month ago

I don't have plans to change the checkmark styling soon, as it is complicated to do right with all permutations.

The best advise for now: