Can we add border around the fontawesome icon using css?
Yes you can. Use a text-shadow:
.my-icon {
text-shadow: 0 0 3px #000;
}
Or Also you can use webkit text stroke remember it only work with Chrome and Safari
CSS-Tricks example
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
As of v5.0.6, Font Awesome uses svg
s and path
s 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;
}