unable to apply a border-radius to font-awesome icon?

Question

I can't seem to get my font-awesome icon ( a research-gate icon) to have a border radius. I've tried both svg and the direct link, but the border-radius CSS rules don't seem to apply.

<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>


<a href="https://www.researchgate.com"><i class="fab fa-researchgate"></i></a>

<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="researchgate" class="svg-inline--fa fa-researchgate fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 32v448h448V32H0zm262.2 334.4c-6.6 3-33.2 6-50-14.2-9.2-10.6-25.3-33.3-42.2-63.6-8.9 0-14.7 0-21.4-.6v46.4c0 23.5 6 21.2 25.8 23.9v8.1c-6.9-.3-23.1-.8-35.6-.8-13.1 0-26.1.6-33.6.8v-8.1c15.5-2.9 22-1.3 22-23.9V225c0-22.6-6.4-21-22-23.9V193c25.8 1 53.1-.6 70.9-.6 31.7 0 55.9 14.4 55.9 45.6 0 21.1-16.7 42.2-39.2 47.5 13.6 24.2 30 45.6 42.2 58.9 7.2 7.8 17.2 14.7 27.2 14.7v7.3zm22.9-135c-23.3 0-32.2-15.7-32.2-32.2V167c0-12.2 8.8-30.4 34-30.4s30.4 17.9 30.4 17.9l-10.7 7.2s-5.5-12.5-19.7-12.5c-7.9 0-19.7 7.3-19.7 19.7v26.8c0 13.4 6.6 23.3 17.9 23.3 14.1 0 21.5-10.9 21.5-26.8h-17.9v-10.7h30.4c0 20.5 4.7 49.9-34 49.9zm-116.5 44.7c-9.4 0-13.6-.3-20-.8v-69.7c6.4-.6 15-.6 22.5-.6 23.3 0 37.2 12.2 37.2 34.5 0 21.9-15 36.6-39.7 36.6z"></path></svg>


.svg-inline--fa.fa-researchgate.fa-w-14 {
  color:#40BA9B;
  border-radius: 25px !important;
  border:1px !important;
  height:25px;
  width:25px;
  vertical-align: bottom;  
}

Is this possible? I'm out of other solutions.

Answer 1

The SVG code itself is not a square, so it doesn't appear to take the border-radius correctly. Here is an example after updating the SVG code to square dimensions. However, this does change a FontAwesome icon so I cannot necessarily recommend this route - I just wanted to explain why and provide an example.

 svg.fa-researchgate { color: #40BA9B; border-radius: 50%; height: 25px; width: 25px; }

 <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="researchgate" class="svg-inline--fa fa-researchgate" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448"><path fill="currentColor" d="M0,0V448H448V0ZM262.2,334.4c-6.6,3-33.2,6-50-14.2-9.2-10.6-25.3-33.3-42.2-63.6-8.9,0-14.7,0-21.4-.6v46.4c0,23.5,6,21.2,25.8,23.9v8.1c-6.9-.3-23.1-.8-35.6-.8-13.1,0-26.1.6-33.6.8v-8.1c15.5-2.9,22-1.3,22-23.9V193c0-22.6-6.4-21-22-23.9V161c25.8,1,53.1-.6,70.9-.6,31.7,0,55.9,14.4,55.9,45.6,0,21.1-16.7,42.2-39.2,47.5,13.6,24.2,30,45.6,42.2,58.9,7.2,7.8,17.2,14.7,27.2,14.7v7.3Zm22.9-135c-23.3,0-32.2-15.7-32.2-32.2V135c0-12.2,8.8-30.4,34-30.4s30.4,17.9,30.4,17.9l-10.7,7.2s-5.5-12.5-19.7-12.5c-7.9,0-19.7,7.3-19.7,19.7v26.8c0,13.4,6.6,23.3,17.9,23.3,14.1,0,21.5-10.9,21.5-26.8H288.7V149.5h30.4c0,20.5,4.7,49.9-34,49.9ZM168.6,244.1c-9.4,0-13.6-.3-20-.8V173.6c6.4-.6,15-.6,22.5-.6,23.3,0,37.2,12.2,37.2,34.5C208.3,229.4,193.3,244.1,168.6,244.1Z"></path></svg>

Answer 2

Drop shadow around it CSS drop-shadow()

 svg { color:#40BA9B; height:50px; width:50px; } #example_1 { filter: drop-shadow(-1px -1px 0px black) drop-shadow(2px -1px 0px black) drop-shadow(2px 2px 0px black) drop-shadow(-1px 2px 0px black) }

 <svg id="example_1" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="researchgate" class="svg-inline--fa fa-researchgate fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 32v448h448V32H0zm262.2 334.4c-6.6 3-33.2 6-50-14.2-9.2-10.6-25.3-33.3-42.2-63.6-8.9 0-14.7 0-21.4-.6v46.4c0 23.5 6 21.2 25.8 23.9v8.1c-6.9-.3-23.1-.8-35.6-.8-13.1 0-26.1.6-33.6.8v-8.1c15.5-2.9 22-1.3 22-23.9V225c0-22.6-6.4-21-22-23.9V193c25.8 1 53.1-.6 70.9-.6 31.7 0 55.9 14.4 55.9 45.6 0 21.1-16.7 42.2-39.2 47.5 13.6 24.2 30 45.6 42.2 58.9 7.2 7.8 17.2 14.7 27.2 14.7v7.3zm22.9-135c-23.3 0-32.2-15.7-32.2-32.2V167c0-12.2 8.8-30.4 34-30.4s30.4 17.9 30.4 17.9l-10.7 7.2s-5.5-12.5-19.7-12.5c-7.9 0-19.7 7.3-19.7 19.7v26.8c0 13.4 6.6 23.3 17.9 23.3 14.1 0 21.5-10.9 21.5-26.8h-17.9v-10.7h30.4c0 20.5 4.7 49.9-34 49.9zm-116.5 44.7c-9.4 0-13.6-.3-20-.8v-69.7c6.4-.6 15-.6 22.5-.6 23.3 0 37.2 12.2 37.2 34.5 0 21.9-15 36.6-39.7 36.6z"></path></svg>