Html 如何在CSS中输入字体图标旁边的文本块？_Html_Css_Font Awesome

Html 如何在CSS中输入字体图标旁边的文本块？

html css

Html 如何在CSS中输入字体图标旁边的文本块？,html,css,font-awesome,Html,Css,Font Awesome,我的问题是每次我将文本放在图标旁边时： a）包裹在图片下面 b）除非我指定宽度，否则不会显示在一行上 c）或者，如果它显示为一个块，它会在图标上方或下方显示，而不是在图标旁边代码如下： .fa堆栈{ 字体大小：50px；边缘顶部：30px； } 富华广场{ 颜色：#AA2200； } q{ 颜色：白色； } .boxtext2{ 字体系列：“Raleway”，无衬线；字体大小：30px；线高：50px；左边距：200px；显示：内联块； } .fa-stack-1x{ 背景：

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

a）包裹在图片下面

b）除非我指定宽度，否则不会显示在一行上

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

代码如下：

.fa堆栈{
字体大小：50px；
边缘顶部：30px；
}
富华广场{
颜色：#AA2200；
}
q{
颜色：白色；
}
.boxtext2{
字体系列：“Raleway”，无衬线；
字体大小：30px；
线高：50px；
左边距：200px；
显示：内联块；
}
.fa-stack-1x{
背景：灰色；
}


Q
textexteafafaflegajf；利亚

再次仔细查看您试图声明的规则的选择器。您会注意到使用的是

.boxtext2

，而不是

#boxtext2

.fa堆栈{
字体大小：50px；
边缘顶部：30px；
}
富华广场{
颜色：#AA2200；
}
q{
颜色：白色；
}
#boxtext2{
字体系列：“Raleway”，无衬线；
字体大小：30px；
线高：50px；
左边距：200px；
显示：内联块；
}
.fa-stack-1x{
背景：灰色；
}


Q
textexteafafaflegajf；利亚

再次仔细查看您试图声明的规则的选择器。您会注意到使用的是

.boxtext2

，而不是

#boxtext2

.fa堆栈{
字体大小：50px；
边缘顶部：30px；
}
富华广场{
颜色：#AA2200；
}
q{
颜色：白色；
}
#boxtext2{
字体系列：“Raleway”，无衬线；
字体大小：30px；
线高：50px；
左边距：200px；
显示：内联块；
}
.fa-stack-1x{
背景：灰色；
}


Q
textexteafafaflegajf；利亚

已更新

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>

要获得响应，您需要为自定义类或id添加媒体查询。以下是
这是拉链，谢谢你的帮助
[https://www.dropbox.com/s/9mdybtoq4ruc3uu/demo.zip?dl=0][1]
//代码
Q
测试回波
//风格
身体{
利润率：15px；
}
.名单{
列表样式：无；
显示：内联flex；
}
.文本{
字号：2.5em；
显示：内联flex；
垫面：8.5%；
左侧填充：20px；
}
.fa-stack-1x{
背景：灰色；
颜色：白色；
}
.fa堆栈{
字体大小：50px；
边缘顶部：30px；
}
@仅介质屏幕和（最小宽度：500px）和（最大宽度：767px）和
（方位：肖像）{
.text{字体大小：19px；顶部填充：12.5%；}
.fa堆栈{字体大小：20px；页边空白顶部：30px；}
}
@仅介质屏幕和（最小宽度：500px）和（最大宽度：767px）和
（方向：景观）{
.text{font size:19px；padding top:11.5%；}
.fa堆栈{字体大小：20px；页边空白顶部：30px；}
}
@仅介质屏幕和（最小宽度：320px）和（最大宽度：499px）和
（方位：肖像）{
.text{字体大小：16px；顶部填充：13.5%；}
.fa堆栈{字体大小：17px；页边空白顶部：30px；}
}
@仅介质屏幕和（最小宽度：348px）和（最大宽度：499px）和
（方向：景观）{
.text{字体大小：16px；顶部填充：12.5%；}
.fa堆栈{字体大小：17px；页边空白顶部：30px；}
}
@仅介质屏幕和（最小宽度：320px）和（最大宽度：347px）和
（方位：肖像）{
.text{字体大小：14px；顶部填充：13.5%；}
.fa堆栈{字体大小：15px；页边空白顶部：30px；}
}
@仅介质屏幕和（最小宽度：320px）和（最大宽度：347px）和
（方向：景观）{
.text{字体大小：14px；顶部填充：12.5%；}
.fa堆栈{字体大小：15px；页边空白顶部：30px；}
}

快乐编码：）

更新

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>

要获得响应，您需要为自定义类或id添加媒体查询。以下是
这是拉链，谢谢你的帮助
[https://www.dropbox.com/s/9mdybtoq4ruc3uu/demo.zip?dl=0][1]
//代码
Q
测试回波
//风格
身体{
利润率：15px；
}
.名单{
列表样式：无；
显示：内联flex；
}
.文本{
字号：2.5em；
显示：内联flex；
垫面：8.5%；
左侧填充：20px；
}
.fa-stack-1x{
背景：灰色；
颜色：白色；
}
.fa堆栈{
字体大小：50px；
边缘顶部：30px；
}
@仅介质屏幕和（最小宽度：500px）和（最大宽度：767px）和
（方位：肖像）{
.text{字体大小：19px；顶部填充：12.5%；}
.fa堆栈{字体大小：20px；页边空白顶部：30px；}
}
@仅介质屏幕和（最小宽度：500px）和（最大宽度：767px）和
（方向：景观）{
.text{font size:19px；padding top:11.5%；}
.fa堆栈{字体大小：20px；页边空白顶部：30px；}
}
@仅介质屏幕和（最小宽度：320px）和（最大宽度：499px）和
（方位：肖像）{
.text{字体大小：16px；顶部填充：13.5%；}
.fa堆栈{字体大小：17px；页边空白顶部：30px；}
}
@仅介质屏幕和（最小宽度：348px）和（最大宽度：499px）和
（方向：景观）{
.text{字体大小：16px；顶部填充：12.5%；}
.fa堆栈{字体大小：17px；页边空白顶部：30px；}
}
@仅介质屏幕和（最小宽度：320px）和（最大宽度：347px）和
（方位：肖像）{
.text{字体大小：14px；顶部填充：13.5%；}
.fa堆栈{字体大小：15px；页边空白顶部：30px；}
}
@仅介质屏幕和（最小宽度：320px）和（最大宽度：347px）和
（方向：景观）{
.text{字体大小：14px；顶部填充：12.5%；}
.fa堆栈{字体大小：15px；页边空白顶部：30px；}
}

快乐编码：）

谢谢，我不知道。但它并没有给我想要的。你可以和我分享。你到底想要什么？？也许我可以帮你我想要文本和图标并排，而不需要在图像下包装文本。哪个图标和文本是什么