Float: right adds a new line in Firefox

Question

I have a button inside a list element and I want to display an icon at the start of the button, then button text and at the far right end of the button, another icon an arrow.

.btn-product {
  text-align: left;
  width: 100%;
  background-color: #FEC006;
  border-bottom: 4px solid #FE9700;
  border-top: 1px solid rgba(82, 174, 110, 0.6);
  border-left: 2px solid rgba(254, 163, 0, 0.77);
  border-right: 0;
  border-radius: 8px;
  color: #333;
  font-size: 18px;
  padding-right: 5px;
  margin-top: 11px;
}

.btn-product:hover,
.btn-product:focus {
  background-color: #fff;
  color: #555;
}

a.product-ic::before {
  font-family: fontAwesome;
  content: "\f19c\00a0";
  float: left;
}

.btn-product::after {
  font-family: fontAwesome;
  content: "\f054\00a0";
  float: right;
}

<li>
  <a class="btn btn-default btn-product product-ic" href="#service" role="button">Advisors</a>
</li>

Chrome shows this just as I expected, but Firefox takes the arrow down to the next line.

On Chrome

On Firefox

I read that the issue is because of white-space: nowrap.

I'm not confident in removing that line from Bootstrap CSS fearing how it would affect the rest of the elements (right now there are no apparent negative effects or turning off that line).

Is there any way I can make my button look the same way it looks on chrome right now, everywhere else too? Is float: right replaceable by something else? All I want is — icon at the start of the button, text next, arrow at the end of the button.

Answer 1

Use this alternate also:

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.btn-product {
  text-align: left;
  width: 100%;
  background-color: #FEC006;
  border-bottom: 4px solid #FE9700;
  border-top: 1px solid rgba(82, 174, 110, 0.6);
  border-left: 2px solid rgba(254, 163, 0, 0.77);
  border-right: 0;
  border-radius: 8px;
  color: #333;
  font-size: 18px;
  padding-right: 5px;
  margin-top: 11px;
  position: relative;
  padding-right: 50px;
}

.btn-product:hover,
.btn-product:focus {
  background-color: #fff;
  color: #555;
}

a.product-ic::before {
  font-family: fontAwesome;
  content: "\f19c\00a0";
  float: left;
}

.btn-product::after {
  font-family: fontAwesome;
  content: "\f054\00a0";
  position: absolute;
  top: 8px;
  right: 15px;

}

Answer 2

.btn-product{
    display: flex;
}
.btn-product::after{
   margin-left: auto;
}

Answer 3

Can you add an extra element to your button html?

<li >
    <a class="btn btn-default btn-product product-ic" href="#service" role="button">
        <span class="product-ic-label">Advisors</span>
    </a>
</li>

And the CSS:

.btn-product{
    text-align: left;
    width: 100%;
    background-color: #FEC006;
    border-bottom: 4px solid #FE9700;
    border-top: 1px solid rgba(82, 174, 110, 0.6);
    border-left: 2px solid rgba(254, 163, 0, 0.77);
    border-right: 0;
    border-radius: 8px;
    color: #333;
    font-size: 18px;
    padding-right: 5px;
    margin-top: 11px;
}
.btn-product:hover,
.btn-product:focus {
    background-color: #fff;
    color: #555;
}
 a.product-ic::before{
  font-family: fontAwesome;
  content: "\f19c\00a0";
  float:left;
}
 a.product-ic>.product-ic-label:before{
  font-family: fontAwesome;
  content: "\f054\00a0";
  float:right;
}

Here is the fiddle: https://jsfiddle.net/7w2jyur4/6/

Answer 4

Try without float. Maybe with position.

A little example:

* {
  box-sizing:border-box;
}
ul, li {
  list-style: none;
}
.btn-product{
  text-align: left;
    width: 100%;
    background-color: #FEC006;
    border-bottom: 4px solid #FE9700;
    border-top: 1px solid rgba(82, 174, 110, 0.6);
    border-left: 2px solid rgba(254, 163, 0, 0.77);
    border-right: 0;
    border-radius: 8px;
    color: #333;
    font-size: 18px;
    padding-right: 5px;
    margin-top: 11px;
    position: relative;
    display: block;
    padding: 5px 5px 5px 30px;
    text-decoration: none;
}
.btn-product:hover,
.btn-product:focus {
    background-color: #fff;
    color: #555;
}
 a.product-ic::before{
  font-family: fontAwesome;
  content: "\f19c\00a0";
  position: absolute;
  left: 5px;
  top: 6px;
}
.btn-product::after{
  font-family: fontAwesome;
  content: "\f054\00a0";
  position: absolute;
  right: 5px;
  top: 6px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <li>
    <a class="btn btn-default btn-product product-ic" href="#service" role="button">Advisors</a> 
  </li>
</ul>

Or you can try with Flexbox:

* {
  box-sizing:border-box;
}
ul, li {
  list-style: none;
}
.btn-product{
  text-align: left;
    width: 100%;
    background-color: #FEC006;
    border-bottom: 4px solid #FE9700;
    border-top: 1px solid rgba(82, 174, 110, 0.6);
    border-left: 2px solid rgba(254, 163, 0, 0.77);
    border-right: 0;
    border-radius: 8px;
    color: #333;
    font-size: 18px;
    padding-right: 5px;
    margin-top: 11px;
    padding: 5px;
    text-decoration: none;
    
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-product:hover,
.btn-product:focus {
    background-color: #fff;
    color: #555;
}
 a.product-ic::before{
  font-family: fontAwesome;
  content: "\f19c\00a0";
}
.btn-product::after{
  font-family: fontAwesome;
  content: "\f054\00a0";
  
  
  margin-left: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <li>
    <a class="btn btn-default btn-product product-ic" href="#service" role="button">Advisors</a> 
  </li>
</ul>

Answer 5

add position: absolute for the arrow

see if that works

https://jsfiddle.net/7w2jyur4/4/ here is the fiddle i made with your code.

Answer 6

You should remove the floats on the :before/:after, replacing it by a position absolute, and adding a position relative on .btn-product.

You'll be free to place your icons (top;right;bottom;left) as you want with minor difference in browsers.