In navigation bar icon and paragraph in 1 line-CodePudding

How i can have p and icon in navigation bar like this position icon and paragraph in same line

CodePudding user response：

First of all, I assume that those are links to other URI, I would rather use the $<a> tag and not the $<p> tag. A generic html format for the nav bar is written below:

<header>
 <nav>
  <ul>
   <li>
    <a href="linkToOtherURI" >
     <img src="locationOfIcon"/>
     Popular
    </a>
   </li>
   <li>
    ...
   </li>
   ...
  </ul>
 </nav>
</header>

As for the css:

header {
 height: 200px;
 width: 100vw;
}
nav {
 height: 100%;
 width: 100%;
}
ul {
 height: 100%;
 width: 100%;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}
li {
 flex: 1;
 height: 100%;
}

a.button-with-icon {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 height: 100%;
 vertical-align: middle;
}

a > img {
 width: 20px;
 height: auto;
}

If you really want to use a $<p> tag, replace all the $<a> tags with $<p> tags.

P.S. this is my first reply to a post, so my apologize if something is badly formulated

CodePudding user response：

first of all you should write display flex for your li and write align items baseline like this code : icons from fontawesome

               <div >
                  <ul >
                     <li ><i ></i></li>
                     <li ><P>Home</P></li>
                  </ul>
               </div>





                .navbar{
                background-color: pink;
                                        }
             .navitem{
             list-style-type: none;
             align-items: baseline;
             display: flex;

                                  }
             .navlist{
              padding: 3px;}

CodePudding user response：

You can use ::before and google Material Icons

Something like this:

ul {
  display: inline;
}

#contact::before {
  font-family: 'Material Icons';
  content: "alternate_email";
}

#about::before {
  font-family: 'Material Icons';
  content: "help";
}

<!DOCTYPE html>
<html lang="en">

    <head>
        <link rel="stylesheet" href="master.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="test.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material Icons">
        <title>Icons</title>
    </head>
    <body>
        
        <nav>
            <ul>
                <li id="popular">Popular</li>
                <li id="about">About</li>
                <li id="contact">Contact</li>
            </ul>
        </nav>

    </body>
</html>

You can learn more about material icons here:

https://fonts.google.com/icons