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

Question

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

Answer 1

是的你可以.使用文字阴影:

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

Answer 2

从v5.0.6开始,Font Awesome使用svgs和paths来绘制它们的图标.在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

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

Answer 5

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

不过你可以尝试在上面放一些东西。