title: How to put the icon and the text in the same line
body: <p>The globe icon and the word language is putted in the same line and I try to enlarge the button but it still can't solve my problem.</p>
  <p>For my project I want to put an I icon on the button, in the language button, I want to put a globe Icon on the left hand side of the text language, I found the Icon on css.gg</p>
  <p><a href="https://css.gg/globe-alt" rel="nofollow noreferrer">https://css.gg/globe-alt</a></p>
  <p><a href="https://i.stack.imgur.com/tLAHD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tLAHD.png" alt="enter image description here" /></a></p>
  <p>The button now look like this, the icon is on the top of the text I thought that the width of the button is not enough, so i tried to enlarge the button but it still on the top of the text, I think it is not the problem of size, I tried to change <code>inline-block</code> to <code>block</code> but it don't work either</p>
  <p>Html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;dropdown&quot;&gt;
     &lt;button class=&quot;dropbtn&quot; style=&quot;font-family: Quicksand, sans-serif;&quot;&gt;&lt;i class=&quot;gg-globe-alt&quot;&gt;&lt;/i&gt;Language&lt;/button&gt;
        &lt;div class=&quot;dropdown-content&quot;&gt;
            &lt;a href=&quot;https://example.com/en/&quot; target=&quot;_blank&quot;&gt;English&lt;/a&gt;
            &lt;a href=&quot;https://example.com/zh-rg/&quot; target=&quot;_blank&quot;&gt;正體中文&lt;/a&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Css</p>
  <pre class="lang-css prettyprint-override"><code>/*dropdown button*/
  .dropbtn {
    background-color: #292827;
    color: white;
    padding: 15px 40px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  
  .dropdown-content {
    display: none;
    position: relative;
    background-color: #292827;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  
  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  
  .dropdown-content a:hover {
    background-color: #3b3a39
  }
  
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  
  .dropdown:hover .dropbtn {
    background-color: #292827;
  }
  </code></pre>