Question 44685 in Html Question posted in
Some basic documentation can be found here.

How to add and center an icon in a button? – Html

Im having issues while trying to center my icon on the button, here is the code and the print

button

edit: here the html code too

obs: this .btn code is just me trying to center the button, without succes,

 <button class="btn">
     <i class="gg-format-justify"> </i>
 </button>


.btn
{
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    /*border: none; */
    cursor: pointer;
  
}


    .gg-format-justify,
    .gg-format-justify::before {
     display: block;
     box-sizing: border-box;
     width: 16px;
     height: 2px;
     border-radius: 3px;
     background: currentColor;
     box-shadow: 0 8px 0;
     color: rgb(47, 94, 183);
    }

.gg-format-justify {
     margin-top: -11px;
     transform: scale(var(--ggs,1));
     position: relative
    }
    
    .gg-format-justify::before {
     content: "";
     position: absolute;
     top: 4px;
     left: 0
    }
Tags:

2

Answers


  1. 0

    Would be be helpful if you can provide the HTML as well. But you can try
    using flexbox to centre elements. This would essentially centre the button within its container

        .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    If you want read a good resource you can check out: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

    Login or Signup to reply.
  2. 0

    You can get bars (and icons) easier using font awesome:
    put this in your head

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    Put this in your body

    <button class="btn"> <i class="fa fa-bars"></i> </button>

    Put this in your style like Connor mentioned:

    .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

    This should get you bars in the center, for more icons:
    https://fontawesome.com/search?s=solid&f=sharp&o=r

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search