您好,实际上,我试图防止环绕字体真棒图标的文字。我尝试了很多方法。但是这些在这种情况下不起作用。请帮助我解决此问题。
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>
答案 0 :(得分: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>
答案 1 :(得分:0)
为段落提供左填充,并使用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>