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

【问题标题】：Can we add border around the fontawesome icon using css?我们可以使用 css 在 fontawesome 图标周围添加边框吗？
【发布时间】：2016-03-11 05:54:46
【问题描述】：

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

【问题讨论】：

标签： css icons border

【解决方案1】：

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

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

或者你也可以使用 webkit text stroke 记住它只适用于 Chrome 和 Safari

CSS-Tricks example

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

【讨论】：

请上传你的答案caniuse.com/#feat=text-stroke
这适用于您使用 FA 作为字体时。现在很多用途都与 SVG 一起使用，所以这行不通。

【解决方案2】：

从 v5.0.6 开始，Font Awesome 使用 svgs 和 paths 来绘制图标。在 Inspect Element 工具的帮助下，以下是我在图标路径周围设置边框的方法。

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

【讨论】：

我不清楚如何让它工作，所以我在让它工作后创建了这个测试。要在 Chrome 中工作，您必须导入 SVG 版本的 font awesome。
正是我想要的。谢谢。
建议在 SVG 元素中识别需要笔画的元素。就我而言，我想为 fa-slash 添加一个边框，它位于 .fa-slash path 的正下方。

【解决方案3】：

使用 text-shadow 属性如下：

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

【讨论】：

这适用于您使用 FA 作为字体时。现在很多用途都与 SVG 一起使用，所以这行不通。

【解决方案4】：

我不清楚如何让它工作，所以我在让它工作后创建了这个测试。要在 Chrome 中工作，您必须导入 SVG 版本的 font awesome (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>

【讨论】：

【解决方案5】：

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

“使用 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

【讨论】：

这不会在图标本身周围添加边框，而是在容器周围添加边框。

【解决方案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

【讨论】：

【解决方案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%; 
}

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

【讨论】：

【解决方案8】：

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

不过，您可以尝试在上面放置一些东西。

【讨论】：