想要在导航栏中添加一个图标

Question

My navbar should look like:我的导航栏应该是这样的：

I want to add bars icon from font-awesome which should appear just on the left of the home link.我想从 font-awesome 添加条形图标，它应该出现在主页链接的左侧。 I tried it many times but each time tried my entire structure of the navbar is ruined as well as the responsiveness.我尝试了很多次，但每次尝试我的导航栏的整个结构以及响应能力都被破坏了。

Please suggest some ideas so that the icon appears on the left of home link while keeping the design and responsiveness constant请提出一些想法，以便图标出现在主页链接的左侧，同时保持设计和响应能力不变

 body{ box-sizing: border-box; font-family: sans-serif; background-color: #091118; } nav{ position: relative; margin: 0; padding: 0; font-size: 0; box-shadow: 0 2px 3px 0; width: 100%; height: 50px; border-radius: 15px; background-color: #04111ffa; overflow: hidden; } nav a{ width: 100%; font-size: 15px; color: seashell; display: inline-block; position: relative; text-decoration: none; text-transform: uppercase; display: inline-block; line-height: 50px; z-index: 5; text-align: center; } nav.animation{ position: absolute; height: 50px; top: 0; z-index: 0; width: 100px; background-color: rgb(58, 233, 218); border-radius: 10%; transition: all 0.5s ease 0s; } a:nth-child(1){ left: 100px; width: 90px; } nav.start-home,a:nth-child(1):hover~.animation { width: 90px; left: 100px; } a:nth-child(2){ left: 100px; width: 100px; } nav.start-about,a:nth-child(2):hover~.animation { width: 100px; left: 190px; } a:nth-child(3){ left: 100px; width: 120px; } nav.start-contact,a:nth-child(3):hover~.animation { width: 100px; left: 300px; } a:nth-child(4){ left: 100px; width: 170px; } nav.start-privacy-policy,a:nth-child(4):hover~.animation { width: 170px; left: 410px; } a:nth-child(5){ left: 100px; width: 100px; } nav.start-docs,a:nth-child(5):hover~.animation { width: 100px; left: 580px; }.search-container{ float: right; } input[type=text]{ padding: 6px; margin-top: 13px; font-size: 17px; border: none; border-radius: 15px; }.search-container button{ float: right; padding: 6px 10px; margin-top: 13px; margin-right: 30px; font-size: 17px; border-radius: 15px; background-color: rgb(58, 233, 218); }.search-container button:hover{ background-color: rgb(35, 168, 157); } @media screen and (max-width: 948px) { nav{ height: 300px; } nav a{ display: flex; } a:nth-child(1){ left: 20px; width: 60px; } nav.start-home,a:nth-child(1):hover~.animation { width: 85px; left: 0px; top: 0; } a:nth-child(2){ left: 20px; width: 100px; } nav.start-about,a:nth-child(2):hover~.animation { width: 92px; left: 0; top: 50px; } a:nth-child(3){ left: 20px; width: 120px; } nav.start-contact,a:nth-child(3):hover~.animation { width: 110px; left: 0px; top: 100px; } a:nth-child(4){ left: 20px; width: 170px; } nav.start-privacy-policy,a:nth-child(4):hover~.animation { width: 165px; left: 0px; top: 150px; } a:nth-child(5){ left: 20px; width: 100px; } nav.start-docs,a:nth-child(5):hover~.animation { left: 0; top: 200px; width: 85px; }.search-container{ float: left; } } @media screen and (max-width: 380px) { span.text{ display: none; }.search-container{ display: inline-block; } }

 <body> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> <a href="#">Privacy Policy</a> <a href="#">Docs</a> <div class="animation start-home"></div> <div class="search-container"> <form> <input type="text" placeholder="Search..." name="search" class="searchbar"> <button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button> </form> </div> </nav> </body>

Answer 1

Try the below code.试试下面的代码。 For more understanding refer the provided link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_v如需更多了解，请参阅提供的链接https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_v

 <,DOCTYPE html> <html> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <style> body {font-family, Arial, Helvetica; sans-serif.}:navbar { width; 100%: background-color; #555: overflow; auto. }:navbar a { float; left: padding; 12px: color; white: text-decoration; none: font-size; 17px. }:navbar a:hover { background-color; #000. }:active { background-color; #04AA6D: } @media screen and (max-width. 500px) {:navbar a { float; none: display; block; } } </style> <body> <div class="navbar"> <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> <a href="#"><i class="fa fa-fw fa-search"></i> Search</a> <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> </div> </body> </html>

想要在导航栏中添加一个图标

问题描述

1 个解决方案

解决方案1
-1 2021-12-27 14:18:56

想要在导航栏中添加一个图标

问题描述

1 个解决方案

解决方案1 -1 2021-12-27 14:18:56

解决方案1
-1 2021-12-27 14:18:56