在网页设计中，导航栏起着非常重要的作用，它为用户提供了浏览网页的方便。通过使用CSS，我们可以添加导航栏的固定图标，以进一步增强用户体验。

.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
z-index: 999;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar li:not(:first-child) {
display: none;
}
.navbar li.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive li {
float: none;
display: block;
}
.navbar.responsive li a {
text-align: center;
}
}

以上代码中，我们首先创建了一个固定的导航栏，使用了position: fixed属性来保持它在屏幕顶部。接着，我们添加了一个包含我们导航链接的

，并用CSS设置了它们的样式。

在移动设备上，我们使用@media查询来隐藏导航链接，只留下一个图标按钮，这个按钮可以展开导航栏。当用户点击按钮时，我们使用Javascript来实现展开和隐藏效果。

最后，我们使用.icon类来为按钮添加一个适当的图标，并确保它在移动设备上显示。

这样一来，在各种不同的设备和屏幕大小下，我们都可以保持导航栏的可用性和易用性，提供了更加友好的用户体验。