html - 如何在 CSS 中的 Font Awesome 图标旁边输入文本 block ？

Question

我的问题是每次我在图标旁边放置文本时:

a) 包裹在图像下

b) 除非我指定宽度，否则不会出现在一行上

c) 或者如果它显示为一个 block ，它会在图标上方或下方显示，而不是紧挨着它。

代码如下:

.fa-stack {
    font-size: 50px;
    margin-top: 30px;
}
.fa-square {
    color: #AA2200;
}
.q {
    color:white;
}
.boxtext2 {
    font-family: 'Raleway',sans-serif;
    font-size: 30px;
    line-height: 50px;
    margin-left: 200px;
    display: inline-block;
}
.fa-stack-1x {
background: gray;
}

<div id ="container">
    <span class="fa-stack">
        <span class="fa fa-square fa-stack-2x"></span>
        <span class="fa fa-stack-1x q"><strong>Q</strong></span>
        <div class="boxtext2">
                texttextextexetexteafafaflegajf;lea
        </div> 
    </span>
</div>

Answer 1

再仔细查看您要声明的规则的选择器。您会注意到 .boxtext2 被用来代替 #boxtext2。

.fa-stack {
font-size: 50px;
margin-top: 30px;
}
.fa-square {
color: #AA2200;
}
.q {
color:white;
}
#boxtext2 {
font-family: 'Raleway',sans-serif;
font-size: 30px;
line-height: 50px;
margin-left: 200px;
display: inline-block;
}

.fa-stack-1x {
    background: gray;
}

<div id ="container">
    <span class="fa-stack">
       <span class="fa fa-square fa-stack-2x"></span>
       <span class="fa fa-stack-1x q"><strong>Q</strong></span>
       <div id="boxtext2">
                texttextextexetexteafafaflegajf;lea
       </div> 
    </span>
</div>