Bootstrap navbar icons

HTML & CSS
1

how to make icons along side of navbar with spacing and size
my code is :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>xtrababes</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="1037.css">
	</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-4">
			<h1>Authorized</h1>
		</div>

		<div class="col-md-8">
			<ul class="nav justify-content-center">
					<li class="nav-item">
						<a class="nav-link" href="#">Home</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Product list</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Pages</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Blog</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">About Us</a>
					</li>
					<li class="nav-item">
						<a href="#"><i class="fa fa-search fa-lg"></i></a>
					</li>
					<li class="nav-item">
						<a href="#"><i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i></a>
					</li>
				</ul>
		</div>
	</div>
</div>
</body>
</html>
2

Off Topic

@abhishekpandey7879: when you post code on the forums, you need to format it so it will display correctly. (I’ve formatted the above post for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

3

It all depends of what spacing and size you want?

You can add a class to the anchor holding the icons and apply some padding like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xtrababes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="1037.css">
<style>
.icon{padding:5px 20px;display:inline-block;}
</style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h1>Authorized</h1>
    </div>
    <div class="col-md-8">
      <ul class="nav justify-content-center">
        <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Product list</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Pages</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li>
        <li class="nav-item"> <a class="icon" href="#"><i class="fa fa-search fa-lg"></i></a> </li>
        <li class="nav-item"> <a class="icon" href="#"><i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i></a> </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

Of course I didn’t know what you wanted it to look like :slight_smile:

1 Like
4

thx you given a good solution

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.