Can we add border around the fontawesome icon using css?

As of v5.0.6, Font Awesome uses svgs and paths to draw their icons. With a little help from the Inspect Element tool, here's how I put borders around the icon paths.

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

Use text-shadow property like following:

.my-bordered-icon{
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

It wasn't clear for me how to make it work, so I created this test once I've made it work. To work in Chrome you have to import the SVG version of font awesome (https://use.fontawesome.com/releases/v5.8.1/js/all.js).

It works in chrome and firefox

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10vw;
  background: #aaa;
}

.fa-times path {
  stroke: white;
  stroke-width: 30px;
}

<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

<i class="fa fa-times" aria-hidden="true"></i>

just give a class to your icon with following style.

.fa-border-icon {
    border-width: 3px;
    border-style: solid;
    border-color: orange;
    border-image: initial;
    border-radius: 50% 50% 50% 50%; 
    padding: 6% 9% 6% 9%; 
}

(use paddings and radius according to your need)