时间戳

首页 > 解决方案 > 停止在字体真棒图标周围环绕文本

html - 停止在字体真棒图标周围环绕文本

问题描述

嗨实际上我试图阻止环绕字体真棒图标的文本。我尝试了很多方法。但这些在这种情况下不起作用。请帮我解决这个问题。

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>

标签： htmlcss

解决方案

给段落左填充，并使用左移图标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>

推荐阅读