停止在字体真棒图标周围换行

Question

您好，实际上，我试图防止环绕字体真棒图标的文字。我尝试了很多方法。但是这些在这种情况下不起作用。请帮助我解决此问题。

body {
  font-family: "Montserrat";
}

.fa {
  margin-right: 10px;
  font-size: 20px !important;
}

<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet" type="text/css">

<div class="dashboard-profile-wrp dashboard-todo">
  <p><i class="fa fa-rocket mob-mnu-icon" aria-hidden="true" data-original-title="" title=""></i><a href="/dashboard/boost-your-sales.html" class="link" data-original-title="" title="">Upgrade Membership</a> to <b>connect with buyers like never before</b>    and grow your sales beyond your local and national boundaries.and grow your sales beyond your local and national</p>
  <p><i class="fa fa-shopping-basket fa-fw" aria-hidden="true"></i><a href="/dashboard/boost-your-sales.html" class="link" data-original-title="" title="">Upgrade Membership</a> to <b>connect with buyers like never before</b> and grow your sales beyond your
    local and national boundaries.and grow your salesgrow your sales </p>
  <p><i class="fa fa-camera fa-fw" aria-hidden="true"></i><a href="/dashboard/boost-your-sales.html" class="link" data-original-title="" title="">Upgrade Membership</a> to <b>connect with buyers like never before</b> and grow your sales beyond your local
    and national boundaries.and grow your sales beyond your local and national boundaries.</p>

</div>

Answer 1

body {
  font-family: "Montserrat";
}

.fa {
  margin-right: 10px;
  font-size: 20px !important;
}

<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet" type="text/css">

<div class="dashboard-profile-wrp dashboard-todo">
  <p>
    <p><i class="fa fa-rocket mob-mnu-icon" aria-hidden="true" data-original-title="" title=""></i></p>
  <a href="/dashboard/boost-your-sales.html" class="link" data-original-title="" title="">Upgrade Membership</a> to <b>connect with buyers like never before</b>    and grow your sales beyond your local and national boundaries.and grow your sales beyond your local and national</p>
  <p><p><i class="fa fa-shopping-basket fa-fw" aria-hidden="true"></i></p><a href="/dashboard/boost-your-sales.html" class="link" data-original-title="" title="">Upgrade Membership</a> to <b>connect with buyers like never before</b> and grow your sales beyond your
    local and national boundaries.and grow your salesgrow your sales </p>
  <p><p><i class="fa fa-camera fa-fw" aria-hidden="true"></i><a href="/dashboard/boost-your-sales.html" class="link" data-original-title="" title=""></p>Upgrade Membership</a> to <b>connect with buyers like never before</b> and grow your sales beyond your local
    and national boundaries.and grow your sales beyond your local and national boundaries.</p>

</div>

Answer 2

为段落提供左填充，并使用text-indent向左移动图标：

body {
  font-family: "Montserrat";
}

p {
  padding-left: 1.5em;
}

.fa {
  text-indent: -1.3em;
  font-size: 20px !important;
}

<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet" type="text/css">

<div class="dashboard-profile-wrp dashboard-todo">
  <p><i class="fa fa-rocket mob-mnu-icon" aria-hidden="true" data-original-title="" title=""></i><a href="/dashboard/boost-your-sales.html" class="link" data-original-title="" title="">Upgrade Membership</a> to <b>connect with buyers like never before</b>    and grow your sales beyond your local and national boundaries.and grow your sales beyond your local and national</p>
  <p><i class="fa fa-shopping-basket" aria-hidden="true"></i><a href="/dashboard/boost-your-sales.html" class="link" data-original-title="" title="">Upgrade Membership</a> to <b>connect with buyers like never before</b> and grow your sales beyond your
    local and national boundaries.and grow your salesgrow your sales </p>
  <p><i class="fa fa-camera" aria-hidden="true"></i><a href="/dashboard/boost-your-sales.html" class="link" data-original-title="" title="">Upgrade Membership</a> to <b>connect with buyers like never before</b> and grow your sales beyond your local
    and national boundaries.and grow your sales beyond your local and national boundaries.</p>

</div>