Prevent wrapping of FontAwesome

Question

How can I make sure that when using the mobile mode the icons do not appear vertically but remain horizontally as in the desktop version? I tried to solve the problem by adding the display: inline property as the answer to this question was answered but did not produce any results

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/>

<div class="col-lg-4 col-md-12 col-xs-12 text-center" style="margin-top: 15px;">
  <div class="row" style="height: 70px; border: 1px solid #dfdfdf; border-radius: 8px; padding: 10px 0;">
      <div class="col-md-4">
          <i class="fas fa-cogs" style="display:inline; font-size: 24px; color: rgb(20, 20, 71);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">0</p>
      </div>
      <div class="col-md-4">
          <i class="fas fa-question" style="display:inline; font-size: 24px; color: rgb(233, 17, 17);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">7</p>
      </div>
      <div class="col-md-4">
          <i class="fas fa-check" style="display:inline; font-size: 24px; color: rgb(20, 175, 20);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">3</p>
      </div>
  </div>
  </div>

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

On each of the 3 div that wrap the icons, remove the class: .col-md-4 and give each of them a width of 30% or so.
On the .row add display:flex, justify-content:space-around, flex-flow:row nowrap.
On the most outer div add class="container"

Demo

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>SO49836008</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
  <style>

  </style>
</head>

<body>
  <header></header>
  <section class="container">

    <div class="col-lg-4 col-md-12 col-xs-12 text-center" style="margin:15px;auto">
      <div class="row" style="height: 70px; border: 1px solid #dfdfdf; border-radius: 8px; padding: 10px 0;display:flex;justify-content:space-around;flex-wrap:row nowrap;">


        <div width='30%'>
          <i class="fas fa-cogs" style="display:inline; font-size: 24px; color: rgb(20, 20, 71);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">0</p>
        </div>


        <div width='30%'>
          <i class="fas fa-question" style="display:inline; font-size: 24px; color: rgb(233, 17, 17);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">7</p>
        </div>


        <div width='30%'>
          <i class="fas fa-check" style="display:inline; font-size: 24px; color: rgb(20, 175, 20);"></i>
          <p style="font-weight: bold; margin-bottom: 0px; margin-top: 3px;">3</p>
        </div>


      </div>
    </div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

Prevent wrapping of FontAwesome

1 Answers1

Demo