CODEWITHSUNDEEP
cssiconsborder
Anil Maharjan
Anil Maharjan

Reputation: 783

Can we add border around the fontawesome icon using css?

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

Upvotes: 64

Views: 109783

Answers (7)

Esteban
Esteban

Reputation: 1706

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>

Upvotes: 13

Red
Red

Reputation: 1147

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;

Upvotes: 110

user2281668
user2281668

Reputation: 431

Use text-shadow property like following:

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

Upvotes: 43

reiallenramos
reiallenramos

Reputation: 1295

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;
}

Upvotes: 38

Matthew Dunn
Matthew Dunn

Reputation: 141

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

Upvotes: 2

Codeone
Codeone

Reputation: 1201

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

Upvotes: 1

Pkarls
Pkarls

Reputation: 33

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

You could however try and place something over it.

Upvotes: -8

Related Questions