时间戳

首页 > 解决方案 > 如何将 HTML 按钮中的图标与文本分开移动？

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

问题描述

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

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

标签： htmlcsswebbutton

解决方案

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>

推荐阅读