Issue
I have this icon with text in font-awesome:
label {
display: inline-flex;
align-items: center;
text-align: center;
background: lightgray;
padding: 5px;
border-radius: 5px;
font-size: 25px;
}<script src="https://kit.fontawesome.com/6e4efb2c5e.js" crossorigin="anonymous"></script>
<label><i class="fab fa-html5"></i> HTML</label>
<label><i class="fab fa-js-square"></i> Javascript</label>When I aligned the icons with the text I noticed that there was no space between the text and the icon although I added a space. I tried to give a fixed width and set it apart with justify-content: space-around; but the problem is that I need these labels with different texts and that means that the text can be longer or shorter. How can I solve this problem?
Thanks in advance!
Solution
Solved by adding a margin
label {
display: inline-flex;
align-items: center;
text-align: center;
background: lightgray;
padding: 5px;
border-radius: 5px;
font-size: 25px;
}
i {
margin-right: 5px;
}<script src="https://kit.fontawesome.com/6e4efb2c5e.js" crossorigin="anonymous"></script>
<label><i class="fab fa-html5"></i> HTML</label>
<label><i class="fab fa-js-square"></i> Javascript</label>Answered By – JustChillinInDaHood
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0