Aligning glyphicons and logo on the nav bar

Question

My navbar looks like this . There are two questions I have here.

Q1. I want to add a white border to my logo (extreme right). I've tried everything,including adding the filter: drop-shadow(10px 10px 5px -5px white) but somehow, nothing gets added to the image.

The HTML and CSS codes for the logo (on extreme left) and the glyphicon (extreme right) are as follows -

Logo HTML:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
          <img src="images/logo.png" alt="logo" />
      </a>

Logo CSS

.navbar-brand img {

     width:60x;
     height:60px;
     position:relative;
     bottom:20px;
     object-fit:contain;
    -webkit-filter: drop-shadow(10px 10px 5px -5px white);
    filter:  drop-shadow(10px 10px 5px -5px white); 

}

Q2. I want to align the glyphicon on the extreme right a bit to the top. I'v tried `

display:relative;`top:4px;` 

but it doesn't do the trick. Any thoughts on that?

HTML glyphicon:

<li><a href="#"><span class="glyphicon glyphicon-log-in"> </span>  </a></li>

Thanks in advance for all the help guys!

Answer 1

for Q1:

it is possible to add a border radius to your styling:

 border: 1px solid white;
 border-radius: 25px;

However, according to highest rated answer to this post, all images are saved in an width X height format, making it impossible to add a border like you are intending. You will need to manually add the border to your .png image, with photoshop or some other program.

for Q2:

you want to add position absolute to the css. So the code will look like this:

position: absolute; top: 4px;