Question

我需要更改图标的边框宽度 - fa-comment-o。我们可以用css改变边框宽度大小吗？

Answer 1

是的，你可以。使用文字阴影：

.my-icon {
     text-shadow: 0 0 3px #000;
}

或者您也可以使用 webkit文本笔划，请记住它只适用于 Chrome 和 Safari

CSS-Tricks example

-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;

Answer 2

从v5.0.6开始，Font Awesome使用svg和path来绘制图标。在Inspect Element工具的帮助下，这里是我如何在图标路径周围放置边框。

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

Answer 3

使用如下的text-shadow属性：

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

Answer 4

内置边框 - 至少从v4.6开始。

“使用fa-border和fa-pull-right或fa-pull-left可以轻松拉动引号或文章图标。”

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

填充，边框样式，颜色和更多可以在font-awesome css文件中调整;寻找边界。

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

Answer 5

您可以通过在fa-circle图标上堆叠其他图标来使其看起来呈圆形。也可以使用类fa-inverse反转颜色。您可以使用CSS前缀fa和图标的名称在任何地方放置Font Awesome图标。 Font Awesome旨在与内联元素一起使用（为简洁起见，我们喜欢<i>标记，但使用<span>在语义上更正确。）

示例并了解更多内容http://fontawesome.io/examples/

要增加相对于容器的图标大小，请使用fa-lg（增加33％），fa-2x，fa-3x，fa-4x或fa-5x类。< / p>

<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

Answer 6

只需按照以下样式为图标添加类。

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

（根据需要使用填充和半径）

Answer 7

我不清楚如何使它起作用，所以一旦使它起作用，便创建了该测试。要在Chrome中工作，您必须导入真棒（https://use.fontawesome.com/releases/v5.8.1/js/all.js）的SVG版本。

它可以在chrome和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>

Answer 8

如果你使用 React/Next 和 FontAwesome 库组件/图标，那么你可以只定位 fontawesome svg

svg{
  path {
    stroke: #000;
    stroke-width: 30px;
  }
}

Answer 9

不，你不能，因为它是图像的一部分。

但是你可以尝试在上面放一些东西。

我们可以使用css在fontawesome图标周围添加边框吗？

9 个答案: