如何将图标和文本段落放在一行中?

Julia,把你所有的花车都取下来:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="date">
       <i class="fa fa-user-o" aria-hidden="true"></i>
       <p style="display: inline-block" >10/01/2018</p>
</div>

您也可以这样做:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="date">
       <i class="fa fa-user-o"> 10/01/2018</i>
</div>

如果您当前使用的网站字体有图标备忘单,那么您可以有一组第三方的图标。在这里,我想介绍一下“字体很棒的图标”。这是一组好看且受欢迎的图标。 要使用此集合,需要将此代码添加到 head 网站中的部分(通过OIW博客):

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

–在添加CSS后,您可以使用此代码放入显示图标的HTML中(您可以将此方法应用于使用上述字体备忘表的部分。某些字体有独特的使用方式)

<i class="fa fa-user-o"></i>

如果您不想在HTML中使用代码,可以使用CSS。使用CSS,您需要找到显示图标的部件的类或ID,然后使用下面的CSS代码来显示图标。这里我显示第三方的编辑图标 字体很棒的图标 之前( ::before )标题,以及两个属性,即padding right和font style(您也可以使用after属性将其显示在标题之后):#ohiwill

.date .fa::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}