It\u2019s a navigation bar where each menu item has an icon<\/strong> next to (or instead of) the text.<\/p>\n Common places you see this style:<\/p>\n Let\u2019s build the most common and versatile versions<\/strong> step by step.<\/p>\n (You\u2019ll need Font Awesome or any icon library: <link rel=”stylesheet” href=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css”>)<\/p>\n This is extremely common in mobile apps and mobile-friendly websites.<\/p>\n Would you like to go deeper into one of these directions?<\/p>\n Examples:<\/p>\n Just tell me what you want to focus on next \u2014 I\u2019ll explain it slowly with complete code. \ud83d\ude0a<\/p>\n","protected":false},"excerpt":{"rendered":" What is a \u201cNavbar with Icons\u201d? It\u2019s a navigation bar where each menu item has an icon next to (or instead of) the text. Common places you see this style: Mobile apps (bottom nav...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-2791","post","type-post","status-publish","format-standard","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/posts\/2791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/comments?post=2791"}],"version-history":[{"count":1,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/posts\/2791\/revisions"}],"predecessor-version":[{"id":2792,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/posts\/2791\/revisions\/2792"}],"wp:attachment":[{"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/media?parent=2791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/categories?post=2791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/tags?post=2791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Most popular styles in 2025\u20132026<\/h3>\n
\n\n
\n \nStyle<\/th>\n Where it\u2019s used most<\/th>\n Text visible?<\/th>\n Best screen sizes<\/th>\n Mobile friendly?<\/th>\n<\/tr>\n<\/thead>\n \n Icon + Text (side by side)<\/td>\n Dashboards, desktop apps<\/td>\n Yes<\/td>\n Desktop & tablet<\/td>\n Good<\/td>\n<\/tr>\n \n Icon only (tooltips on hover)<\/td>\n Clean\/minimal dashboards<\/td>\n No<\/td>\n Desktop<\/td>\n Needs care<\/td>\n<\/tr>\n \n Bottom navigation bar (mobile)<\/td>\n Mobile-first apps & websites<\/td>\n Yes (small)<\/td>\n Phones<\/td>\n Excellent<\/td>\n<\/tr>\n \n Top bar with large icons<\/td>\n Creative agencies, portfolios<\/td>\n Sometimes<\/td>\n Desktop<\/td>\n Medium<\/td>\n<\/tr>\n \n Hybrid (icons on desktop, text on mobile)<\/td>\n Responsive websites<\/td>\n Conditional<\/td>\n All devices<\/td>\n Very good<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Version 1 \u2013 Classic Top Navbar with Icon + Text (very common)<\/h3>\n
HTML<\/h4>\n
<header class=\"header\">\r\n <nav class=\"navbar container\">\r\n\r\n <!-- Logo -->\r\n <a href=\"\/\" class=\"logo\">AppName<\/a>\r\n\r\n <!-- Main navigation with icons -->\r\n <ul class=\"nav-menu\">\r\n <li>\r\n <a href=\"#\" class=\"nav-item active\">\r\n <i class=\"fas fa-home\"><\/i>\r\n <span>Home<\/span>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=\"#\" class=\"nav-item\">\r\n <i class=\"fas fa-compass\"><\/i>\r\n <span>Discover<\/span>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=\"#\" class=\"nav-item\">\r\n <i class=\"fas fa-book-open\"><\/i>\r\n <span>Learn<\/span>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=\"#\" class=\"nav-item\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <span>Community<\/span>\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n\r\n <!-- Right side actions -->\r\n <div class=\"nav-actions\">\r\n <a href=\"#\" class=\"nav-item search\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <span>Search<\/span>\r\n <\/a>\r\n <a href=\"#\" class=\"nav-item profile\">\r\n <i class=\"fas fa-user-circle\"><\/i>\r\n <span>Profile<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Mobile hamburger -->\r\n <button class=\"hamburger\" aria-label=\"Toggle menu\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n <\/button>\r\n <\/nav>\r\n<\/header><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\nCSS<\/h4>\n
.navbar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 1rem 1.5rem;\r\n background: white;\r\n border-bottom: 1px solid #e5e7eb;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n}\r\n\r\n.logo {\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: #111827;\r\n text-decoration: none;\r\n}\r\n\r\n.nav-menu {\r\n display: flex;\r\n list-style: none;\r\n gap: 2rem;\r\n margin: 0;\r\n}\r\n\r\n.nav-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #374151;\r\n text-decoration: none;\r\n font-weight: 500;\r\n padding: 0.6rem 1rem;\r\n border-radius: 6px;\r\n transition: all 0.15s ease;\r\n}\r\n\r\n.nav-item:hover {\r\n background: #f3f4f6;\r\n color: #111827;\r\n}\r\n\r\n.nav-item.active {\r\n background: #eff6ff;\r\n color: #2563eb;\r\n font-weight: 600;\r\n}\r\n\r\n.nav-item i {\r\n font-size: 1.2rem;\r\n}\r\n\r\n.nav-actions {\r\n display: flex;\r\n gap: 1rem;\r\n}\r\n\r\n\/* Mobile *\/\r\n@media (max-width: 768px) {\r\n .nav-menu,\r\n .nav-actions > *:not(.hamburger) {\r\n display: none;\r\n }\r\n\r\n .hamburger {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\nVersion 2 \u2013 Icon-only Navbar (with tooltips) \u2013 very clean & modern<\/h3>\n
HTML change<\/h4>\n
<a href=\"#\" class=\"nav-item active\" data-tooltip=\"Home\">\r\n <i class=\"fas fa-home\"><\/i>\r\n<\/a><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\nCSS additions<\/h4>\n
.nav-item {\r\n position: relative;\r\n padding: 0.8rem;\r\n font-size: 1.35rem;\r\n}\r\n\r\n.nav-item:hover::after,\r\n.nav-item:focus::after {\r\n content: attr(data-tooltip);\r\n position: absolute;\r\n bottom: -36px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: #1f2937;\r\n color: white;\r\n padding: 0.45rem 0.9rem;\r\n border-radius: 6px;\r\n font-size: 0.82rem;\r\n white-space: nowrap;\r\n pointer-events: none;\r\n opacity: 0;\r\n transition: opacity 0.15s;\r\n}\r\n\r\n.nav-item:hover::after,\r\n.nav-item:focus::after {\r\n opacity: 1;\r\n}\r\n\r\n\/* Optional: active indicator below icon *\/\r\n.nav-item.active::before {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 4px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 6px;\r\n height: 6px;\r\n background: #2563eb;\r\n border-radius: 50%;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nVersion 3 \u2013 Bottom Navigation Bar with Icons (mobile-first style)<\/h3>\n
HTML<\/h4>\n
<nav class=\"bottom-nav\">\r\n <a href=\"#\" class=\"nav-item active\">\r\n <i class=\"fas fa-home\"><\/i>\r\n <span>Home<\/span>\r\n <\/a>\r\n <a href=\"#\" class=\"nav-item\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <span>Search<\/span>\r\n <\/a>\r\n <a href=\"#\" class=\"nav-item add\">\r\n <i class=\"fas fa-plus-circle\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"nav-item\">\r\n <i class=\"fas fa-heart\"><\/i>\r\n <span>Favorites<\/span>\r\n <\/a>\r\n <a href=\"#\" class=\"nav-item\">\r\n <i class=\"fas fa-user\"><\/i>\r\n <span>Profile<\/span>\r\n <\/a>\r\n<\/nav><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\nCSS<\/h4>\n
.bottom-nav {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 70px;\r\n background: white;\r\n border-top: 1px solid #e5e7eb;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-around;\r\n box-shadow: 0 -2px 10px rgba(0,0,0,0.08);\r\n z-index: 1000;\r\n}\r\n\r\n.nav-item {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n color: #6b7280;\r\n text-decoration: none;\r\n font-size: 0.75rem;\r\n gap: 4px;\r\n}\r\n\r\n.nav-item i {\r\n font-size: 1.5rem;\r\n}\r\n\r\n.nav-item.active {\r\n color: #2563eb;\r\n}\r\n\r\n.nav-item.add {\r\n color: white;\r\n background: #2563eb;\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n margin-top: -28px;\r\n box-shadow: 0 6px 15px rgba(37,99,235,0.35);\r\n font-size: 1.8rem;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\nQuick Tips Teachers Always Emphasize<\/h3>\n
\n
\n