font awesome css circle with two colours

[alxne]

When I add two colours to the circle, it no longer stays as a circle, it becomes much taller. attachment shows how the two coloured circle is no longer a circle (it's stretched), whereas the single colour circles are fine. Any ideas how to keep it circular?

Css for single colour is 

    color: #5fc75d;
    font-size: 1.2em;

Css for two coloured circle is

    color: transparent;
    background: linear-gradient(to right, #5fc75d 0%, #5fc75d 50%, #f19e2d 50%, #f19e2d 100%);
    border-radius: 50%;
    font-size: 1.2em;

Edited June 29, 2020 by alxne

[Barand]

You could roll your own.

function twoColorCircle($a, $b, $sz) {
    $out = "<svg width='$sz' height='$sz' viewBox='0 0 1000 1000'>
            <linearGradient id='grad2'  x1='0' y1='0' x2='1' y2='0'>
            <stop offset='0%' style='stop-color:$a'/>
            <stop offset='50%' style='stop-color:$a'/>
            <stop offset='50%' style='stop-color:$b'/>
            <stop offset='100%' style='stop-color:$b'/>
            </linearGradient>
           ";
    $c = 500;
    $r = 499;
    $out .= "<circle cx='$c' cy='$c' r='$r' fill='url(#grad2)' stroke='#000' />
             </svg>";
    return $out;
} 


foreach ([16,32,64,128,256] as $sz)
    echo twoColorCircle('#5fc75d' , '#f19e2d' , $sz);

echo '<br>';
    
foreach (['16em','8em','4em','2em','1em'] as $sz)
    echo twoColorCircle('#5fc75d' , '#f19e2d' , $sz);

[maxxd]

Or you could be really tricky with it:

<style>
.circle-2-colors{
  height: 0;
  width: 0;
  border-top: 15px solid red;
  border-right: 15px solid red;
  border-bottom: 15px solid blue;
  border-left: 15px solid blue;
  border-radius: 50%;
  transform: rotate(45deg);
}
</style>