How to Add Border Around the Fontawesome Icon Using CSS

Add border around font-awesome (v5) icon

I had to dissect the internals of font-awesome.

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

Make Font Awesome icons in a circle?

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;

}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>

Adding a fontawesome icon with border into form input

Add the icon and the input inside a span. You can then add a border to the whole span if you want to our you can put a border on just the icon or input box.

.fa-address-book-o {

border: solid;

border-color: red;

}

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<span><i class="fa fa-address-book-o" aria-hidden="true"></i><input type="text"/></span>

Possible to draw css border around icon font that is a circle shape?

Yes, put a border-radius on your ::before element:

.icn-clock-circle::before {
    content: "\e9dd";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: red solid 1px;
}

You will have to adjust the width and height values to the size of the icon, as you didn't provide enough HTML/CSS.

Make Font Awesome icons in a circle border with right 1:1 ratio

You need to set width, height, line height, & text-align to center the icon.
icon will need also vertical-align reset to middle.

Avoid padding in pixels, but use width/height/line-height in em or rem. You can then change font-size and keep the ratio without updating other values.

a /* or selector a .fa */
  {  
  font-size:3em;
  border-radius: 50%;
  border: solid white;
  color: white;
  line-height: 2em;
  width: 2em;
  height: 2em;
  text-align: center;
  display: inline-block;
    transition:0.5s;
}
/* demo purpose */
a:hover {font-size:2em}
.fa {
/* optionnal vertical-align: middle;*/
}
body {
  background: #333
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"> <i class="fa fa-google"></i>
</a>

Is there a way to edit the edges or borders of fontawesome icons?

The short answer is no, you cannot edit the FontAwesome webfont icons without downloading, editing, and reuploading the individual svgs.

I would use the background-less versions of these icons and then put them each inside a div. Then you can set the div border-radius, background-color, etc. to exactly what you need.

A couple of pointers with this process:

Use display: grid; for each container div, that way you can also add place-items: center; to super-center each icon inside of it's div.