另一个有用的方法是使用一个图标库，比如Font Awesome或者类似的，你可以在CSS中使用它作为字体，如果你有太多的元素，它会让你的代码更干净。
以下技术包括将填充保留在按钮上，并使用::before插入图标：

.button {
  padding-left: 80px;
}

.button::before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  content: "\f099";
  width: 80px;
  height: 80px;
}

.button {
  transition: all .2s ease-in-out;
  background-color: #3481b4;
  opacity: 0.8;
  border-radius: 12px;
  border-color: white;
  border-style: double;
  color: white;
  padding: 14px 28px;
  padding-left: 48px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  max-width: 85%;
  min-width: 80%;
  font-size: 18px;
}

button:hover {
  transform: scale(1.1);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<button class="button" onclick="function()"> Twitter </button>

.button {
  transition: all .2s ease-in-out;
  background-color: #3481b4;
  opacity: 0.8;
  border-radius: 12px;
  border-color: white;
  border-style: double;
  color: white;
  padding: 14px 28px;
  padding-left: 48px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  max-width: 85%;
  min-width: 80%;
  font-size: 18px;
}

<script src="https://use.fontawesome.com/f9acb8e72a.js"></script>

 

<button class="button" onclick="function()"><i class="fa fa-twitter"></i> Twitter</button>

你可以使用位置相对到设置你的图标在左边的按钮

<button class="button" onclick="function()"><i class="fa-brands fa-twitter"></i> Twitter</button>

中央支助系统

button{
      width:100px;
      padding:10px;
    }
    
    i{
      position:absolute;
      left:15px
    }

在button元素内部添加图标。
第一个月
但最好的方法是使用fontawsome库here它超级容易使用，并提供了大量的商业图标。

这可以是超级简单的像这样或更复杂-所以没有吸引力，但这只是一个替代“如何”，而不是“看起来很棒”在这里。
我添加了第三个示例，以便将更新后的OP问题与左侧的图像更紧密地匹配起来，并在内容周围添加了一些样式。
创建到twitter的svg图像：https://about.twitter.com/en/who-we-are/brand-toolkit

.content-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  row-gap: 1rem;
}

img {
  display: inline-block;
  background-color: pink;
}

.button {
  transition: all .2s ease-in-out;
  background-color: #3481b4;
  opacity: 0.8;
  border-radius: 0.75rem;
  border-color: white;
  border-style: double;
  color: white;
  padding: 1rem 2rem;
  padding-left: 4rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  max-width: 85%;
  min-width: 80%;
  font-size: 1.25rem;
}

.button button {
  color: #ffffff;
  background-color: #3481b4;
  border: none;
  font-size: 1em;
}

.button button::before {
  content: url('blacktweet.png');
  alt: "My Tweet:";
}

@supports (content: "x" / "y") {
  .button button::before {
    content: "★" / "tweet Text:";
  }
}

@supports not (content: "x" / "y") {
  .button button::before {
    content: "★";
    alt: "tweet Text:";
  }
}

.button:hover {
  transform: scale(1.1);
}

.modern-container {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  border: solid 1px #22ff22;
  padding-left: 1.5rem;
}

.modern-container>div:first-child {
  border-bottom: 2px solid #2222ff;
  padding: 0.25rem;
}

.modern-button-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5rem;
}

.modern-button-container:hover {
  transform: scale(1.1);
}

.modern-button-container {
  /* just styling */
  transition: all .2s ease-in-out;
  background-color: #3481b4;
  opacity: 0.8;
  border-radius: 0.75rem;
  border-color: white;
  border-style: double;
  color: white;
  text-decoration: none;
  max-width: 85%;
  min-width: 80%;
  font-size: 1.25rem;
}

.modern-button-container:last-child: {
  margin-left: auto;
}

.flex-button-img {
  margin-left: 0.5rem;
  height: 1em;
  width: 1em;
}

.flex-button {
  display: flex;
  align-items: center;
  color: #ffffff;
}

.flex-button button {
  color: #ffffff;
  background-color: #3481b4;
  border: none;
  font-size: 1em;
}

<div class="content-container">
  <div>
    <button class="button" onclick="function()"><img src="some.png" alt="bird tweet button">Twitter</button>
  </div>
  <div>
    <div>Here we place a character "icon" on this:</div>
    <div class="button">
      <button class="xxx">Twitter</button>
    </div>
  </div>
  <div class="modern-container">
    <div>Here we have an image icon but using some grid and flex css</div>
    <div class="modern-button-container">
      <div class="flex-button-img">
        <svg version="1.1" id="White" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M400,400H0V0h400V400z M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6
    c10-7.2,18.7-16.3,25.6-26.6c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4
    c-9.4-10-22.7-16.2-37.4-16.2c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6
    c-4.4,7.6-6.9,16.4-6.9,25.8c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3
    c-4.3,1.2-8.8,1.8-13.5,1.8c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22
    c-4.1,0-8.2-0.2-12.2-0.7C97.7,293.1,124.7,301.6,153.6,301.6"/>
</svg>
      </div>
      <div class="flex-button">
        <button class="tweet-btn">Twitter!</button>
      </div>
      <div></div>
    </div>
  </div>
</div>