Stop wrapping text around font awesome icons

Question

Hi actually i tried to prevent the text that wrapping around the font awesome icons. I tried so many methods. but those didn't work in this case. Please help me to fix this.

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>

`.fa {display:block !important}` should be all you need here. — Daniel Beck, Sep 08 '18 at 14:41
Actually i want the icons to be left and the text to be right. i want the text which is around the icons appear on right side. — Prabu, Sep 08 '18 at 14:44
`.dashboard-profile-wrp { position: relative; } .dashboard-profile-wrp p { margin-left: 35px; } .fa { position: absolute; left: 0; margin-right: 10px; font-size: 20px !important; }` — JonLord, Sep 08 '18 at 14:49
with negative text-indent and positive margin-left you can get the effect you want, but i think put icon and text in separate divs would be better — Chris Li, Sep 08 '18 at 14:53
"Actually i want" When you want something specific, it's usually a good idea to say that in the question, so we don't have to guess what you mean. — Daniel Beck, Sep 08 '18 at 14:54

score 1 · Answer 1 · answered Sep 08 '18 at 14:43

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>

first your code is invalid, second this is not what the OP want and third you added 0 explanation on what you did .. and you got upvoted — Temani Afif, Sep 08 '18 at 14:47
I want to show both icons and text in the same row. Only the text which is around the icon needs to be right aligned. — Prabu, Sep 08 '18 at 14:49

score 1 · Answer 2 · answered Sep 08 '18 at 14:57

Give the paragraphs a left padding, and move the icon left using 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>

Stop wrapping text around font awesome icons

2 Answers2