56

I need to change the border width of the icon - fa-comment-o. Can we change the border-width size with css?

Anil Maharjan
  • 703
  • 1
  • 6
  • 9

8 Answers8

104

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;
lin
  • 17,956
  • 4
  • 59
  • 83
Red
  • 1,087
  • 1
  • 7
  • 5
36

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;
}
reiallenramos
  • 1,235
  • 2
  • 21
  • 29
  • 1
    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. – Esteban Mar 24 '19 at 09:09
  • Exactly what I was looking for. Thank you. – tedebus Oct 18 '19 at 12:58
  • It's advised to identify inside the SVG elements which one needs the stroke. In my case I wanted to add a border to fa-slash, and it's directly under `.fa-slash path`. – igorsantos07 Dec 07 '21 at 21:45
34

Use text-shadow property like following:

.my-bordered-icon{
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
user2281668
  • 341
  • 3
  • 2
10

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>
Esteban
  • 1,496
  • 17
  • 22
3

Borders are built in - at least as of v4.6.

"Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or article icons." 

    <i class="fa fa-camera-retro fa-border"></i> fa-lg

Padding, border style, color & more can be tweaked in the font-awesome css file; search for fa-border.

http://fontawesome.io/examples/#animated

Matthew Dunn
  • 135
  • 5
1

You can do this by stacking other icons over the fa-circle icon to make them look circular in shape. Also the color can be inverted using the class fa-inverse. You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

example and lear more abbout it http://fontawesome.io/examples/

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
Codeone
  • 1,173
  • 2
  • 15
  • 40
-1

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)

Eternal
  • 928
  • 9
  • 22
-8

No, you can't since it's part of the image.

You could however try and place something over it.

Pkarls
  • 35
  • 3
  • 18