Personal project issue-search icon not moving when adjusting class selector properties

I’m having a problem with my personal project code I added an icon from an external library google fonts and in my html it looks like this
My html

<li>
  <a href="#" class="nav-color">
     <span class="search-container">
  <i class="material-symbols-outlined material-icon">search</i>
        </span>
       Search`

This is everything that defines the icon
Now my CSS styles

.material-symbols-outlines{
  margin-top:5px;
  position:relative;
  top:3.6px; /*top Moves the element downward from its normal               position.*/
  bottom:0px; /* Moves the element upward from its normal                    position*/
  right:0px; /* Moves the element right  from its normal                    position*/
  
  left:0px; /* Moves the element to the left from its                       normal position*/
  
}
If i were to adjust any of the top bottom right left properties it doesnt move can anyone help with this problem



I analysed my code and I have spotted that my class selector says material symbols outlines it seems to be working now I also spotted that right moves it to the left and left moves it to the right so please ignore the comments but when I adjust my icon to the left more than like 5px it won’t move anymore is that how the property works or?

do you have it live someplace?! if so then share that link as well, happy coding :slight_smile:

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