HTML: Как изменить размер кнопки, чтобы она имела такой же размер, как значок на ней?

Question

Я создал кнопку с помощью https://www.css3buttongenerator.com. Сейчас я пытаюсь изменить размер кнопки в моем HTML, чтобы значок на кнопке идеально подходил к ней. Я хочу, чтобы они оба были одного размера, так сказать. но эта веб-страница на самом деле не помогает мне.

Вот так выглядит мой код. HTML:

<button class="butn"><i class="fa fa-question-circle-o" id="AnzeigeerstellenHilfe"></i></button>

CSS:

.butn {
  color: #859f38;
    background-color:transparent;
     background-size: 30px !important;
    width: 22px !important;
    height: 22px !important;
  text-decoration: none;
    border: none;
     outline: 0 !important;
}

Я играл со значениями в .css и менял / добавлялвещи, но пока безуспешно. Как я могу это сделать?

Answer 1

try:

<button class="butn"><i class="fa fa-question-circle-o" id="AnzeigeerstellenHilfe"></i></button>

.butn {
   color: #859f38;
   background-color:transparent;
   text-decoration: none;
   border: none;
   outline: 0 !important;
}

или используйте ответ @sao, если хотите изменить размер иконки

Answer 2

использование

#icon {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
  }