Skip to content

Commit 4eb8174

Browse files
committedDec 31, 2024·
bug #6671 Align icon and text in a menu item (kniziol)
This PR was squashed before being merged into the 4.x branch. Discussion ---------- Align icon and text in a menu item # Menu configuration It's not necessary. It's just added to have more menu items than a single, default menu item. ```php // src/Controller/Admin/DashboardController.php:47 public function configureMenuItems(): iterable { yield MenuItem::linkToDashboard('dashboard', 'fa fa-home'); yield MenuItem::subMenu('Test', 'fas fa-list') ->setSubItems([ MenuItem::linkToDashboard('dashboard', 'fa fa-home'), MenuItem::linkToDashboard('dashboard', 'fa fa-home'), ]) ; // yield MenuItem::linkToCrud('The Label', 'fas fa-list', EntityClass::class); } ``` # Before (the problem) The icon in the menu item is currently aligned to the top. It would be so much more visually appealing if both the icon and text were centered together. Just take a look at the example below (in the `After` section). ![Icon and text alignment - before](https://github.com/user-attachments/assets/00472066-aff8-438f-9831-f0f9a8785874) # After (the solution) ![Icon and text alignment - after](https://github.com/user-attachments/assets/8b1606e6-209f-430a-9ba7-65f2094fd4e8) Commits ------- 3be8a66 Align icon and text in a menu item
2 parents c4d72d4 + 3be8a66 commit 4eb8174

File tree

2 files changed

+2
-1
lines changed

2 files changed

+2
-1
lines changed
 

‎assets/css/easyadmin-theme/menu.css

+1
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
text-align: center;
8080
block-size: 16px;
8181
inline-size: 1.25em;
82+
margin-top: 3px;
8283
}
8384
#main-menu .menu .menu-icon svg {
8485
color: var(--sidebar-menu-icon-color);

‎public/app.9f3e666b.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

2 commit comments

Comments
 (2)

pfpro commented on Jan 2, 2025

@pfpro
Contributor

I think 1px is enough. Otherwise the FA icons are aligned too far down instead of too high. What do you think?

hafkenscheid commented on Jan 3, 2025

@hafkenscheid
Contributor

See also #6670

Please sign in to comment.