Думаю, это может показаться запутанным, но на моем веб-сайте есть кнопка с текстом и значком. К сожалению, я не могу изменить размер значка, не переместив текст в необычное место. Я новичок в веб-разработке, поэтому прошу прощения, я просто чувствую себя немного застрявшим. Кто-нибудь знает, как я могу изменить размер и переместить этот значок внутри кнопки, чтобы это не повлияло на мой идеально центрированный текст.

HTML-код моей кнопки:

    <div>
         <button id="add">
             <i class="fab fa-discord fa-fw" style="font-size: 30px;"></i>
             &nbspAdd to Discord
         </button></a>
        <button id="dashboard">Dashboard</button>
    </div>

CSS-код моей кнопки:

#add {
   font-family: Rubik, sans-serif;
   font-weight: 400;
   font-size: 1.2rem;
   color: #fefefe;

   background: -webkit-gradient(linear,left top,right top,from(#5779ff),to(#57a5ff));
   background: -webkit-linear-gradient(left,#5779ff,#57a5ff);
   background: -o-linear-gradient(left,#5779ff 0,#57a5ff 100%);
   background: linear-gradient(90deg,#5779ff,#57a5ff);
   border: 0;
   border-radius: 8px;
   margin-right: 1rem;
   height: 3.5rem;
   width: 12.5rem;
   cursor: pointer; 
}
0
TTT 20 Май 2021 в 10:15

2 ответа

Лучший ответ

Вы можете разместить свой значок с помощью position:absolute и padding-left: X вашей кнопки или вы можете использовать display:flex и align-items: center на кнопке.

Позиция: пример абсолютного решения:

#add {
  position: relative;
  padding-left: 2rem;
  font-family: Rubik, sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #fefefe;
  background: linear-gradient(90deg,#5779ff,#57a5ff);
  border: 0;
  border-radius: 8px;
  margin-right: 1rem;
  height: 3.5rem;
  width: 12.5rem;
  cursor: pointer; 
}

#add .fab {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<button id="add">
     <i class="fab fa-discord fa-fw" style="font-size: 30px;"></i>
     &nbspAdd to Discord
 </button>

Пример гибкого решения:

#add {
  display: flex;
  align-items: center;
  font-family: Rubik, sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #fefefe;
  background: linear-gradient(90deg,#5779ff,#57a5ff);
  border: 0;
  border-radius: 8px;
  margin-right: 1rem;
  height: 3.5rem;
  width: 12.5rem;
  cursor: pointer; 
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<button id="add">
     <i class="fab fa-discord fa-fw" style="font-size: 30px;"></i>
     &nbspAdd to Discord
 </button>
1
Jax-p 20 Май 2021 в 07:24
#add
{
  display: flex;
  align-items: center;
}

Должен сделать трюк

0
Andreja Zivanovic 20 Май 2021 в 07:18