I NEED to use display: flex in order to style this icon and text that are within a span tag. As you can see the width is way too long, I just want the width to be just as long as the width of image and text, that’s it.
NOTE: If text is longer I always want the width of span to adjust so it’s always the same as image and text combine. Can someone point me in the right direction, please?
Here’s my code:
span {
display: flex;
align-items: center;
background: #ddd;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<span>
<i class="fa fa-arrow-right"></i>
My Text
</span>>Solution :
The display: flex property is what is causing the element to behave like a block element. So you can either use flex-inline or just set the width of the block element to max-content.
.option1 {
display: flex-inline;
align-items: center;
background: #ddd;
}
.option2 {
display: flex;
align-items: center;
background: #ddd;
width: max-content;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<span class="option1">
<i class="fa fa-arrow-right"></i>
My Text
</span>
<span class="option2">
<i class="fa fa-arrow-right"></i>
My Text
</span>