How to style font-awesome icons in css?

Question

I have a screenshot below which I have replicated in HTML/CSS. The design is exactly the same both for mobile and desktop view. In the design, the angle dropdown font-awesome icons (marked with arrow in the screenshot) are aligned properly with the headings which is not the case in my design in mobile view.

1st Image:

I have created the fiddle for the above screenshot. For some reasons, I am not seeing the mobile view in the fiddle (Is there any way we can enable mobile view in the fiddle?). The snippets of HTML code which I have used in the fiddle is:

<tr>
    <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
</tr>

On mobile view (as shown below in the screenshot) on my pc, I am seeing the Number and Table headings over the angle dropdown icon.

2nd Image:

Problem Statement:

I am wondering what changes I need to make in the fiddle so that Number and Table headings are aligned with the angle dropdown font-awesome icon (marked by arrow in the 1st image) in the mobile view.

For some reasons, I am not able to see the mobile view in the fiddle.

Have you tried setting min-width for the th of these columns? — Josh Mein, Apr 20 '18 at 20:39
@JoshMein Nope, I didn't try. Is there any way, we can enable mobile view in the fiddle ? In that way, I will try in the fiddle 1st and then in my code. — flash, Apr 20 '18 at 20:40
You cant enable mobile view per say; however, jsfiddle allows you you to resize the HTML, Javascript, CSS, and results areas. If you resize the CSS and result area to be less than 700 pixels and click run again, you can replicate your problem. — Josh Mein, Apr 20 '18 at 20:46
@user5447339 when you resize the width then space also decrease. you can define table-layout:fixed on table class. so all columns align with angle dropdown. — Rakesh Kumar, Apr 24 '18 at 07:01

Carol Skelly · Answer 1 · 2018-04-24T14:45:31.070

Just use the Bootstrap 4 text-nowrap class to the table th...

https://jsfiddle.net/9shn3qxz/

<div class="table-responsive body-manage-attendees">
        <table class="table table-hover">
            <thead>
                <tr>
  <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="number text-nowrap">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="table2 text-nowrap">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="status text-nowrap">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="left">Amanda Doe</td>
                    <td class="number1">250</td>
                    <td class="table1">2</td>
                    <td class="right-bill">Bill</td>
                </tr>
                <tr>
                    <td class="left">Andy Doe</td>
                    <td class="number1">14</td>
                    <td class="table1">1</td>
                    <td class="right-bill">Bill</td>
                </tr>

            </tbody>
        </table>
    </div>

It works for me. I have one more question to my [fiddle](https://jsfiddle.net/kqrz13wx/7/embedded/result/) attached in the question above. I am wondering is there any way, we can make the content scrollable similar to [this](https://medium.com/flexbox-and-grids/how-to-create-horizontally-scrollable-sections-with-flexbox-60d860f539b2) ? — flash, Apr 24 '18 at 14:41
I am asking this question because we may have more columns in the future. — flash, Apr 24 '18 at 14:41

Greg McMullen · Answer 2 · 2018-04-20T20:46:39.073

It seems as though you have two options that immediately come to mind.

Use a responsive table on mobile, so that the table width isn't compromised.
Resize your columns with media queries to a point where the name and icon's don't interfere with each other's spacing and the table is still legible.
1. Alternatively, resize your header fonts on mobile.

Using table-responsive

Surround your table with <div class="table-responsive"> to ensure responsiveness.

Using CSS Media Queries

Since you are using Bootstrap 4, I'll keep it as "mobile-first."

th {
    font-size: 14px; // Smallest font size you want them to render
}
@media (min-width: 768px) {
    // After the screen is at least 768px wide, use larger font size
    // alter the min-width as many times as needed or appropriate
    th{
      font-size: 16px;
    }
}

This is basically what you would do inside of your CSS. Maintain the mobile view first, and build up to the larger display sizes.

Edit 2

Playing around with the styles, removing the left/right padding on .table td, .table th seemed to fix the icon issue. You might just want to work on adjusting the column padding for mobile views.

*For the 1st point*, Yes I have used responsive table on my code but somehow I missed it in the fiddle. I have updated [it](https://jsfiddle.net/kqrz13wx/7/) now.. *For the 2nd point*, can you show me in the fiddle ? Is there any way, I can show mobile view in the fiddle ? — flash, Apr 20 '18 at 20:33

score 2 · Accepted Answer · answered Apr 24 '18 at 06:55

The easiest way to do this will be to add white-space:nowrap to the th, so that the words won't get splitted up. You should however add some responsiveness to the table.

.table td,
.table th {
  border-top: none! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none! important;
  white-space: nowrap;
}

.table td.left {
  padding-right: 32%;
}

.dropdown a {
  color: #676767;
  font-weight: bold;
  font-size: 14px;
}

.dropdown li {
  padding-left: 20px;
}

.dropdown li:hover {
  background-color: #EDEDED;
}

.body-manage-attendees {
  width: 100% !important;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  border: 1px solid white;
  color: black;
}

.body-manage-attendees .right-unapid {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #10314C;
}

.square {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  margin-right: 5%;
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

.square.white {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  background-color: white;
  height: 15px;
  margin-right: 10%;
  width: 15px;
  vertical-align: middle;
}

.right-itemswaiting span {
  vertical-align: middle;
  padding-left: 1%;
}

.table td,
.table th {
  border-top: none! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none! important;
}

.table td.left {
  padding-right: 32%;
}

.right-itemswaiting {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.right-itemsreceived {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  border: 1px solid white;
  color: black;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  background-color: #10314C;
}

.body-manage-attendees .right-itemswaiting {
  padding-left: 1%;
  text-align: center;
  color: white;
  border: 1px solid white;
  background-color: #10314C;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  background-color: #1173B7;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="table-responsive body-manage-attendees">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left">Amanda Doe</td>
        <td class="number1">250</td>
        <td class="table1">2</td>
        <td class="right-bill">Bill</td>
      </tr>
      <tr>
        <td class="left">Andy Doe</td>
        <td class="number1">14</td>
        <td class="table1">1</td>
        <td class="right-bill">Bill</td>
      </tr>

    </tbody>
  </table>
</div>

It works for me. I have one more question to my [fiddle](https://jsfiddle.net/kqrz13wx/7/embedded/result/) attached in the question above. I am wondering is there any way, we can make the content scrollable similar to [this](https://medium.com/flexbox-and-grids/how-to-create-horizontally-scrollable-sections-with-flexbox-60d860f539b2) ? — flash, Apr 24 '18 at 14:39
I am asking this question because we may have more columns in the future. — flash, Apr 24 '18 at 14:39
@user5447339 Try [this](https://jsfiddle.net/kqrz13wx/17/), it uses JQuery and mousewheel.js to achieve the scrolling — Akshay, Apr 25 '18 at 03:37

Josh Mein · Answer 4 · 2018-04-20T20:50:28.123

You could set a min-width of the table td and th.

.table td,
.table th {
    border-top: none! important;
    padding-left: 3%;
    min-width:140px;
}

You may have to tweak the actual value applied to min-width. This will prevent the columns from taking up less than the set width, but will not restrict the columns to take up only that amount of space.

I would also consider applying a different min-width per column since the Number column will require around 140px but the Table column only needs about 80px. This will leave more space available for the Name.

score 0 · Answer 5 · answered Apr 24 '18 at 12:45

0

To fix this, you can try adding the Bootstrap 4 text-nowrap class to the table th.

OR you can edit the css property of table th to have white-space:nowrap

answered Apr 24 '18 at 12:45

Sayo Babalola

990
14
25

Can you update it in the fiddle ? In that way, I won't end up doing mistake in my actual code. – flash Apr 24 '18 at 13:43

How to style font-awesome icons in css?

5 Answers5

Using table-responsive

Using CSS Media Queries

Edit 2