CSS Background-color works bottom half only

Question

I'm trying to make a social media button using an a tag and a fontawesome icon. I want to make the entire background color to be black by using css, but when I tried it only the bottom half turned black.

Html:

<div class="social-media">
    <a class="social-media-icon">
        <i class="fa fa-instagram fa-4x" aria-hidden="true"></i>
    </a>
</div>

Css (less):

.social-media{
    .social-media-icon{
        color: red;
        background-color: black;
    }
}

What should I do?

score 2 · Accepted Answer · answered Jul 09 '17 at 04:37

2

Make the icon an (inline-)block element.

.social-media-icon {
  color: red;
  background-color: black;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="social-media">
  <a class="social-media-icon">
    <i class="fa fa-instagram fa-4x" aria-hidden="true"></i>
  </a>
</div>

answered Jul 09 '17 at 04:37

Gerard

15,418
5
30
52

It works :) May I ask why it is necessary to make it inline-block? – Francisco Jul 09 '17 at 04:55
2

inline elements cannot have a width or height set. For a detailed explanation https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block – Gerard Jul 09 '17 at 05:18
oh I see... Thanks! – Francisco Jul 09 '17 at 13:52

score 1 · Answer 2 · answered Jul 09 '17 at 04:52

1

First change your display of a tag to inline-block as it's a inline element, then using pseudo-selector :after add new styling and using z-index align that back of fontawesome icon.

.social-media-icon {
  display: inline-block;
  position: relative;
  color: red;
}

.social-media-icon:after {
  content: "";
  position: absolute;
  left: 2%;
  bottom: 8px;
  width: 95%;
  height: 25px;
  background: black;
  z-indeX: -1;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="social-media">
  <a class="social-media-icon">
    <i class="fa fa-instagram fa-4x" aria-hidden="true"></i>
  </a>
</div>

answered Jul 09 '17 at 04:52

frnt

8,455
2
22
25

@Francisco If I'm right then you have asked to style bottom half icon as black. And that's what above code does. – frnt Jul 09 '17 at 04:57
sorry I meant that I want to have the _entire_ background to be black, but when I tried it didn't work... sorry for the confusion ;) – Francisco Jul 09 '17 at 05:20
It's okay @Francisco and yes that was the confusion :-), well even this works if you just change the height in :after as in this jsFiddle https://jsfiddle.net/kjok3e9q/ – frnt Jul 09 '17 at 05:27

CSS Background-color works bottom half only

2 Answers2