Semantic ui button text issue

Semantic ui button text issue

by Abhishek Nandgaonkar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<p>

</p>
<Button 
  class="ui primary icon labeled button"
  toggle
  active='true'
  >
<i class="user icon"></i>
this is extra long text for a button
</Button>


<button class="ui primary icon labeled button">
<i class="user icon"></i>
short
</button>

<button class="ui primary icon labeled compact button">
<i class="user icon"></i>
compact
</button>
<br><br>
<div>

<button class="ui primary icon labeled button fix-padding">
<i class="user icon"></i>
this is extra long text for a button
</button>


</div>

CSS

.ui.labeled.icon.button.fix-padding {
    padding-left: 3.07143em !important;
    padding-right: .5em !important;
  
}