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

问题

I want to put my font awesome icon and text paragraph into one line. How can I fix this code?

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

回答1:

Julia, remove all your floats:

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

Also you might make it this way:

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

回答2:

If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons. To use this set, you need to add this code to the head section in your website (via OIW Blog):

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

– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)

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

If you don’t want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property): #ohiwill

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

来源：https://stackoverflow.com/questions/48178212/how-do-i-put-icon-and-text-paragraph-in-one-line

标签

css

inline