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

Question

我想把我的超赞字体图标和文本段落放在一行中。我该如何修复此代码？

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

Answer 1

朱莉娅，移除你所有的花车：

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

Answer 2

如果您当前使用的网站字体有Icons Cheatsheet，那么您可以拥有一套第三方的图标。在这里我想介绍一下“Font Awesome Icons”。这是一组 good-looking 和流行的图标。要使用此集合，您需要将此代码添加到您网站的 head 部分（通过 OIW 博客）：

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

– 添加CSS后，可以使用此代码将显示图标的HTML放入（您可以将此方法应用于上面提到的使用字体Cheatsheet的部分。有些字体有独特的使用方式)

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

如果您不需要HTML中的代码，您可以直接使用CSS。使用 CSS 您需要找到显示图标的部分的 Class 或 ID，然后使用下面的 CSS 代码来显示它。这里我在标题前（::before）显示第三方的EDIT图标“Font Awesome Icons”，以及padding-right和[=25的2个属性=]（也可以在标题后使用after 属性显示）：#ohiwill

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

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

How do I put icon and text paragraph in one line?

css

inline