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

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

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/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>

＆＃13;

你也可以这样做：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/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>

＆＃13;

请注意代码

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

用于在答案中显示font-awesome图标。它可以省略。

Answer 2

如果您当前使用的网站字体具有“图标速查表”，则您可以拥有一组第三方的图标。在这里，我要介绍“字体很棒的图标”。这是一组美观且受欢迎的图标。要使用此集合，您需要将此代码添加到您网站的head部分（通过OIW博客）：

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

–添加CSS之后，您可以使用此代码将HTML放到显示图标的HTML中（您可以将这种方法应用于上述使用字体备忘单的部分。某些字体具有独特的使用方式）

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

如果您不需要HTML中的代码，则可以使用CSS。使用CSS，您需要找到显示图标的零件的类或ID，然后使用下面的CSS代码显示它。在这里，我在标题（::before之前显示了第三方“字体真棒图标” 的EDIT图标，以及padding-right和font-style的2个属性（您也可以显示通过使用after属性将其放在标题之后）：#ohiwill

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

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

2 个答案: