Why are my Font Awesome fonts and text blurry?

Viewed 125

As you can see in my code, the labels under the icons are out of focus. What is wrong with it?

.lblBiancoMenu {
  color: white !important;
}

.subCat .li {
  color: white;
}

.parent {
  width: 100%;
  height: 30px;
  border: 1px solid #AAA;
  white-space: nowrap;
  overflow-y: hidden;
}

.child {
  height: 45px;
  overflow-x: auto;
}

.redBack {
  background-color: firebrick;
  text-shadow: 1px 1px 1px #ccc;
  font-size: 1.0em;
  color: white !important;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

.flex-contianer {
  display: flex;
  justify-content: space-between;
  background-color: firebrick;
}

.left-btn {
  width: 100px;
}

.right-btn {
  width: 100px;
}

.btn {
  width: 25%;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="header-content" style="width:100%" class="btn-group  btn-group-toggle " data-toggle="buttons">

  <label class="btn btn-secondary redBack"><i class="fas fa-home"></i><br />
                        <input type="radio" name="options1" id="option1" checked onclick="window.location.href='Index.aspx';">Home
                      </label>
  <label class="btn btn-secondary  redBack"><i class="fa fa-book-open"></i><br />
                        <input type="radio" name="options2" id="option2" >Menù
                      </label>
  <label class="btn btn-secondary redBack"><i class="fa fa-shopping-cart"></i><br />
                        <input type="radio" name="options3" id="option3" onclick="window.location.href='Carrello.aspx';">Carrello
                      </label>
  <label class="btn btn-secondary redBack"><i class="far fa-address-card"></i><br />
                        <a href="registrazione.aspx"><input type="radio" name="options4" id="option4">Account</a>
                      </label>
</div>

1 Answers

Your text shadow is creating a softening effect. Remove that.

.lblBiancoMenu {
  color: white !important;
}

.subCat .li {
  color: white;
}

.parent {
  width: 100%;
  height: 30px;
  border: 1px solid #AAA;
  white-space: nowrap;
  overflow-y: hidden;
}

.child {
  height: 45px;
  overflow-x: auto;
}

.redBack {
  background-color: firebrick;
  /* text-shadow: 1px 1px 1px #ccc; *******************************/
  font-size: 1.0em;
  color: white !important;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

.flex-contianer {
  display: flex;
  justify-content: space-between;
  background-color: firebrick;
}

.left-btn {
  width: 100px;
}

.right-btn {
  width: 100px;
}

.btn {
  width: 25%;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="header-content" style="width:100%" class="btn-group  btn-group-toggle " data-toggle="buttons">

  <label class="btn btn-secondary redBack"><i class="fas fa-home"></i><br />
                        <input type="radio" name="options1" id="option1" checked onclick="window.location.href='Index.aspx';">Home
                      </label>
  <label class="btn btn-secondary  redBack"><i class="fa fa-book-open"></i><br />
                        <input type="radio" name="options2" id="option2" >Menù
                      </label>
  <label class="btn btn-secondary redBack"><i class="fa fa-shopping-cart"></i><br />
                        <input type="radio" name="options3" id="option3" onclick="window.location.href='Carrello.aspx';">Carrello
                      </label>
  <label class="btn btn-secondary redBack"><i class="far fa-address-card"></i><br />
                        <a href="registrazione.aspx"><input type="radio" name="options4" id="option4">Account</a>
                      </label>
</div>

Related