Question

我的问题是每次我将文字放在图标旁边：

a）包裹在图像下

b）除非我指定宽度

，否则不会出现在一行上

c）或者如果它显示为一个块，它会在图标的上方或下方而不是在它旁边。

以下是代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

再次仔细查看您尝试申报的规则的选择器。您会注意到.boxtext2正在使用而不是#boxtext2。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

更新

For responsive you need to add media query for custom class or id. Here is     
your AND Here is the zip for your help 
[https://www.dropbox.com/s/9mdybtoq4ruc3uu/demo.zip?dl=0][1]
//Code
  <body>
  <div class= "container-fluid">
   <div class= "row-fluid">
    <div class= "list">
     <span class="fa fa-stack">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-stack-1x"><strong>Q</strong></i>
     </span>
    <span class="text"> test test test test echo echo echo </span>
   </div>
  </div>
 </div>

</body> 
//style 
<style type="text/css">

  body{
   margin:15px ;
   }
  .list{
   list-style: none;
   display:inline-flex;
   }
  .text{
  font-size:2.5em;
  display:inline-flex;
  padding-top: 8.5%;
  padding-left: 20px;
  }
 .fa-stack-1x{
  background: gray;
  color: White;
  }
 .fa-stack {
  font-size: 50px;
  margin-top: 30px;
  }

 @media only screen and  (min-width:500px) and  (max-width:767px) and 
  (orientation : portrait){
  .text{font-size:19px; padding-top: 12.5%;}
  .fa-stack{font-size: 20px;  margin-top: 30px;}
  }
 @media only screen and  (min-width:500px) and (max-width:767px) and  
 (orientation : landscape){
  .text{font-size:19px; padding-top: 11.5%;}
  .fa-stack{font-size: 20px;  margin-top: 30px;}
  }
 @media only screen and (min-width:320px) and  (max-width:499px) and 
  (orientation : portrait){
  .text{font-size:16px; padding-top: 13.5%;}
  .fa-stack{font-size: 17px;  margin-top: 30px;}
  }
    @media only screen and (min-width:348px) and  (max-width:499px) and 
   (orientation : landscape){
   .text{font-size:16px; padding-top: 12.5%;}
   .fa-stack{font-size: 17px;  margin-top: 30px;}
   }
    @media only screen and (min-width:320px) and  (max-width:347px) and   

  (orientation : portrait){
     .text{font-size:14px; padding-top: 13.5%;}
    .fa-stack{font-size: 15px;  margin-top: 30px;}
    }
    @media only screen and (min-width:320px) and  (max-width:347px) and     
  (orientation : landscape){
   .text{font-size:14px; padding-top: 12.5%;}
  .fa-stack{font-size: 15px;  margin-top: 30px;}
   }

</style>

快乐编码:)

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

2 个答案: