我们可以使用 css 在 fontawesome 图标周围添加边框吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35933260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can we add border around the fontawesome icon using css?
提问by Anil Maharjan
I need to change the border width of the icon - fa-comment-o. Can we change the border-width size with css?
我需要更改图标的边框宽度 - fa-comment-o。我们可以用 css 更改边框宽度大小吗？
回答by Red
Yes you can. Use a text-shadow:
是的你可以。使用文本阴影：
.my-icon {
text-shadow: 0 0 3px #000;
}
Or Also you can use webkit text strokeremember it only work with Chromeand Safari
或者你也可以使用webkit text stroke记住它只适用于Chrome和Safari
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
回答by reiallenramos
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.
从 v5.0.6 开始，Font Awesome 使用svgs 和paths 来绘制它们的图标。在 Inspect Element 工具的帮助下，这是我在图标路径周围放置边框的方法。
.fa-comment g g path {
stroke: black;
stroke-width: 10;
}
回答by user2281668
Use text-shadow property like following:
使用 text-shadow 属性，如下所示：
.my-bordered-icon{
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
回答by Matthew Dunn
Borders are built in - at least as of v4.6.
边框是内置的 - 至少从 v4.6 开始。
"Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or article icons."
“使用 fa-border 和 fa-pull-right 或 fa-pull-left 来轻松拉引引号或文章图标。”
<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.
填充、边框样式、颜色等可以在 font-awesome css 文件中进行调整；搜索fa边界。
回答by Codeone
You can do this by stacking other icons over the fa-circleicon 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 faand 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).
您可以通过在fa-circle图标上堆叠其他图标使它们看起来呈圆形来实现此目的。也可以使用 class 反转颜色fa-inverse。您可以使用 CSS 前缀fa和图标名称将 Font Awesome 图标放置在几乎任何位置。Font Awesome 旨在与内联元素一起使用（<i>为了简洁起见，我们喜欢标签，但使用 a<span>在语义上更正确）。
example and lear more abbout it http://fontawesome.io/examples/
示例并了解更多关于它的信息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-5xclasses.
要增加相对于其容器的图标大小，请使用 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
回答by Eternal
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)
（根据您的需要使用填充和半径）
回答by Esteban
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).
我不清楚如何让它工作，所以我在让它工作后创建了这个测试。要在 Chrome 中工作，您必须导入 SVG 版本的字体 awesome ( https://use.fontawesome.com/releases/v5.8.1/js/all.js)。
It works in chrome and firefox
它适用于 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>回答by Pkarls
No,you can't since it's part of the image.
不，你不能，因为它是图像的一部分。
You could however try and place something over it.
但是，您可以尝试在其上放置一些东西。
