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?

回答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:

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>

回答8:

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

You could however try and place something over it.

来源：https://stackoverflow.com/questions/35933260/can-we-add-border-around-the-fontawesome-icon-using-css

标签

css

icons

border