我们能否使用CSS在fontawesome图标周围添加边框？

Question

我需要更改图标 fa-comment-o 的边框宽度。我们能否使用 CSS 更改边框宽度大小？

- Anil Maharjan

Answer 1

可以的。使用text-shadow：

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

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

CSS-Tricks示例

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

- Red

---

请上传您的答案 https://caniuse.com/#feat=text-stroke - Freestyle09

这是针对使用FA作为字体的情况。现在许多应用都采用SVG，因此这种方法行不通。 - igorsantos07

Fa Icons 的确切答案 - Abijith Ajayan

@igorsantos07，但问题是关于Fontawesome图标，而不是SVG。所以这是最好的答案。 - Abijith Ajayan

@AbijithAjayan 我认为你没有正确阅读我的评论；大多数现代FA图标的使用是基于SVG而不是字体。我正在为使用SVG的用户解释，他们可能会感到有些困惑 - 他们应该使用@reiallenramos的答案。 - igorsantos07

Answer 2

使用text-shadow属性，如下所示：

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

- user2281668

Answer 3

从v5.0.6开始，Font Awesome使用svg和path来绘制它们的图标。在检查元素工具的帮助下，这里详细介绍如何给图标路径添加边框。

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

- reiallenramos

---

我不清楚如何使它工作，所以在我使它工作后，我创建了这个测试。要在Chrome中工作，您必须导入font awesome的SVG版本。 - Esteban

正是我所需要的。谢谢。 - tedebus

建议在SVG元素内部识别需要描边的元素。在我的情况下，我想要为fa-slash添加一个边框，它直接位于.fa-slash path下面。 - igorsantos07

Answer 4

我不清楚如何让它工作，所以我在成功后创建了这个测试。要在Chrome中使用，您必须导入Font Awesome的SVG版本 (https://use.fontawesome.com/releases/v5.8.1/js/all.js)。

它在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>

- Esteban

Answer 5

从v4.6版本开始，FontAwesome已内置边框。

“使用fa-border和fa-pull-right或fa-pull-left轻松创建拉引语或文章图标。”

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

在font-awesome的css文件中，可以调整填充、边框样式、颜色等。搜索fa-border即可。

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

- Matthew Dunn

---

这不是为图标本身添加边框，而是为容器添加边框。 - Mahsan Nourani

Answer 6

您可以通过将其他图标叠加在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类。

<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

Answer 7

只需为您的图标提供以下样式的类。

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

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

- Eternal

Answer 8

不行，因为它是图片的一部分。

不过你可以尝试在上面放置其他东西。

- Pkarls