html css图标怎么跟文字并排,html - FA图标和文字环绕的HTML / CSS问题 - SO中文参考 - www.soinside.com...

我试图找到在Font Awesome Icon旁边写文本的正确方法。我希望文本在图标旁边排成一行，当文本被加长(或显示宽度缩短)时，我想在多行文本中而不是图标下面的图标旁边。

Title

Header

This icon is a picture of a house. I want the text to wrap square so is does not load below the icon. When the display is changed, for mobile users, it jumps below the icon.

width:100%;

}

.fas.fa-home{

font-size:36px;

align-self:start;

float:left;

}

#box.img{

font-size:10em;

color:rgb(32, 61, 133);

padding-left:10px;

float:left;

margin-top:16px;

margin-left:20px;

margin-right:20px;

margin-bottom:16px;

clear:left;

display:inline-block;

}

#title{

color:rgb(32, 61, 133);

margin-top:21.44px;

margin-left:20px;

margin-right:20px;

margin-bottom:21.44px;

}

#header{

color:rgb(32, 61, 133);

margin-top:21.28px;

margin-left:20px;

margin-right:20px;

margin-bottom:21.28px;

}

#content{

color:rgb(85, 85, 85);

margin-top:16px;

margin-left:20px;

margin-right:20px;

margin-bottom:16px;

float:left;

align-self:start;

display:inline-block;

clear:inherit;

}

我希望图标对齐到页面的左侧，文本旁边的文本，就像它们是单独的内容列一样。