Add border around font-awesome (v5) icon

Question

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:

.fa-female, .fa-music{
  color: #BBB;
}

.fa-female{
  -webkit-text-fill-color: #BBB;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke:4px #00FF00;
}

.fa-music{
  text-shadow: 0px 0px 3px #00FF00;
}

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 
<!-- Female 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-female fa-inverse" data-fa-transform="shrink-6 fa-border"></i>
</span>

<!-- 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 class="fas fa-music fa-inverse fa-5x" style="color: black;"></i>

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>

TL;DR try `fa-border`. Source: https://fontawesome.com/how-to-use/svg-with-js#bordered-pulled-icons — Ron van der Heijden, Feb 02 '18 at 12:59

reiallenramos · Accepted Answer · 2018-02-02T13:06:42.060

16

I had to dissect the internals of font-awesome.

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

edited Feb 02 '18 at 13:06

answered Feb 02 '18 at 12:57

reiallenramos

1,235
2
21
29

Not around the circles but around the icons. – Jeremy Feb 02 '18 at 12:59
oh sorry. let me try again – reiallenramos Feb 02 '18 at 13:00
Thank this worked! Awesome I was trying for almost over an hour. Ty – Jeremy Feb 02 '18 at 13:08
Happy to help :) Quick tip, use the Inspect Element tool in your browser. It gives you more insight and ideas on how to approach your problem – reiallenramos Feb 02 '18 at 13:09
Ye I'm using that but I had no idea I could style the `path` – Jeremy Feb 02 '18 at 13:16

score 6 · Answer 2 · answered Feb 02 '18 at 13:10

The new FontAwesome way would be layers: https://fontawesome.com/how-to-use/svg-with-js#layering

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 
<span class="fa-layers fa-fw fa-5x">
   <i class="fas fa-circle" style="color:black"></i>
   <i class="fas fa-circle" data-fa-transform="shrink-3" style="color:Tomato"></i>
   <i class="fa-inverse fas fa-female" data-fa-transform="shrink-6"></i>
</span>

score 3 · Answer 3 · answered Feb 02 '18 at 13:03

3

Please make stroke colour same as the icon background icon, then it will visible like the icon stroke is reduce.

Please try to use below style.

-webkit-text-stroke:4px rgb(190, 53, 48)

answered Feb 02 '18 at 13:03

subir biswas

371
2
5
14

score -1 · Answer 4 · answered Feb 02 '18 at 13:11

I'm guessing you want a round border around the red icon?

You can add a new circle inside the layer span:

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

Add border around font-awesome (v5) icon

4 Answers4