Applying CSS to anchor's class vs applying to anchor via parent element

Question

I'm trying to apply a style to but when I try to apply style directly to the class ".fa {}", it looks different than when I apply it to the "#contact a {}"

/*
.fa {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}
*/

#contact>a {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<section id="contact">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-google"></a>
  <a href="#" class="fa fa-linkedin"></a>
  <a href="#" class="fa fa-youtube"></a>
  <a href="#" class="fa fa-instagram"></a>
</section>

I guess you are overriding `.fa` class of `Font Awesome` when you use `.fa` selector. Why don't you just use somehting like `` and `.social-icons` with `.facebook` class as the selectors? — Harun Yilmaz, Oct 16 '19 at 06:38
you can simply apply css with parent selector like this: `#contact .fa{}` — Minal Chauhan, Oct 16 '19 at 06:39
Try adding your style tag or stylesheet after the font-awesome stylesheet since your .fa default CSS is overriding your .fa CSS — sibasishm, Oct 16 '19 at 06:45

score 2 · Answer 1 · answered Oct 16 '19 at 06:37

It is because .fa default css apply first when you use .fa class, its affect font-size:30px, so use a.fa or override font-size of default .fa using !important

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
.fa {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}
*/

a.fa {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<section id="contact">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-google"></a>
  <a href="#" class="fa fa-linkedin"></a>
  <a href="#" class="fa fa-youtube"></a>
  <a href="#" class="fa fa-instagram"></a>
</section>

score 0 · Answer 2 · answered Oct 16 '19 at 06:44

you can simply write your CSS below the font-awesome CSS.

For example -

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
/*
.fa {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}
*/

#contact>a {
  padding: 40px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 15px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

    </style>
    <section id="contact">
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-google"></a>
      <a href="#" class="fa fa-linkedin"></a>
      <a href="#" class="fa fa-youtube"></a>
      <a href="#" class="fa fa-instagram"></a>
    </section>

Applying CSS to anchor's class vs applying to anchor via parent element

2 Answers2