如何将 HTML 按钮中的图标与文本分开移动？

Question

我想这听起来可能令人困惑，但我的网站上有一个按钮，上面有一些文字和一个图标。不幸的是，如果不将文本移动到一个时髦的位置，我似乎无法调整图标的大小。我对网络开发很陌生，所以我很抱歉，我只是觉得有点卡住了。有谁知道我如何能够在按钮中调整大小和重新定位此图标而不影响我完美居中的文本。

我的按钮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; 
}

Answer 1

#add
{
  display: flex;
  align-items: center;
}

应该可以解决问题

Answer 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>

如何将 HTML 按钮中的图标与文本分开移动？

How can I move an icon in an HTML button separately from text?

html

css

button

web

位置：绝对解示例：

弹性解决方案示例：