Can we add border around the fontawesome icon usin

问题:

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

回答1:

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;

回答2:

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

回答3:

Use text-shadow property like following:

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

回答4:

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

回答5:

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

回答6:

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)

回答7:

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

You could however try and place something over it.