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>
I had to dissect the internals of font-awesome.
.fa-music g g path {
stroke: black;
stroke-width: 10;
}