Font awesome background color is overflown

Question

I want to set background color for a fontawesome icon :

.vert {
      background: springgreen;
    }
...
return '<i class="fa fa-circle-thin vert"></i>';

At runtime I get this :

So how to fill just the interior of the circle ?

check this for answer your question: http://jsfiddle.net/je3zxr9k/ — Pritesh, Aug 16 '19 at 06:55
even if you are using version 5 still color property should work as I stated in the answer. — NickCoder, Aug 16 '19 at 06:58
I tried but does not work ; I m guessing there is smthg interacting with Bootstrap ! — pheromix, Aug 16 '19 at 07:00
if your changing version the fa should change to far in icon tag. and then try changing its color — NickCoder, Aug 16 '19 at 07:04
and it doesn't have anything with bootstrap I have an example of using both at the same time you can take a look in answer. — NickCoder, Aug 16 '19 at 07:07
your answer is not what I m expecting : it just colors the border. — pheromix, Aug 16 '19 at 07:08
@pheromix you create a solid icon using `fas` and `fa-circle` as per the answers. — Mike Poole, Aug 16 '19 at 07:23
you can set `font-weight: bold` in the `i` element and use `color` instead of `background-color` — wodzu, Mar 25 '23 at 12:27

NickCoder · Answer 1 · 2019-08-16T07:23:17.183

font-awesome V5

This example describes exactly the version you are using.

.vert {
color: springgreen;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<span class="fa-stack">
  <i class="fas fa-circle vert fa-stack-2x"></i>
  <i class="far fa-circle fa-stack-2x"></i>
</span>

Here is codepen to describe your concern "Something wrong because interacting with bootstrap".

score 0 · Answer 2 · answered Aug 16 '19 at 06:38

0

You can change the colour of the font-awesome icon by using color: springgreen;

In addition you will want to use a solid icon such as this https://fontawesome.com/icons/circle?style=solid

.vert {
      color: springgreen;
    }
...
return '<i class="fas fa-circle vert"></i>';

answered Aug 16 '19 at 06:38

Mike Poole

1,958
5
29
41

@pheromix that is not a problem. You can use https://fontawesome.com/v4.7.0/icon/circle if you are still using version 4. Just remember to use `fa` instead of `fas` if you are using version 4. – Mike Poole Aug 16 '19 at 06:46

Soothran · Accepted Answer · 2019-08-16T07:40:44.127

You can use stacked icons.

.vert {
  color: springgreen;
}

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


<span class="fa-stack">
  <i class="fas fa-circle vert fa-stack-2x"></i>
  <i class="far fa-circle  fa-stack-2x"></i>
</span>

Using Layers in Font Awesome 5

This feature requires that you use SVG + JS version of Font Awesome 5.

.vert {
  color: greenyellow;
}

<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" data-search-pseudo-elements></script>

<div class="fa-4x">
  <span class="fa-layers fa-fw">
    <i class="fas fa-circle vert" ></i>
    <i class="far fa-circle"></i>
  </span>
</div>

score 0 · Answer 4 · answered Aug 16 '19 at 06:56

0

If you need to fill the entire icon with spring green. Then use Border-radius. Example:-

.vert {
      color: springgreen;
    }

Or if you want to color only on the border. You can use the color property as depicted in the above answers.

answered Aug 16 '19 at 06:56

Ankit

64
7

Font awesome background color is overflown

4 Answers4

font-awesome V5