Add border around font-awesome (v5) icon

Jeremy picture Jeremy · Feb 2, 2018 · Viewed 7.9k times · Source

This question has been asked before in this post. But I don't think its still working with the new font-awesome because they use svg and path elements.

This question is about having a border around the icon, instead of having it around the outer circle.


Some of the solutions found that I tried, but did not work:


Edit: Solution that worked in a codesnippet
Solution by reiallenramos

.fa-music g g path {
  stroke: black;
  stroke-width: 10;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<!-- Music Icon --> 
<span class="fa-layers fa-fw fa-8x" style="color: rgb(190, 53, 48)">
   <i class="fas fa-circle"></i>
   <i class="fas fa-music fa-inverse" data-fa-transform="shrink-8 fa-border"></i>
</span>

Answer

reiallenramos picture reiallenramos · Feb 2, 2018

I had to dissect the internals of font-awesome.

.fa-music g g path {
  stroke: black;
  stroke-width: 10;
}