btn 上的描边或边框颜色答案

【问题标题】：Stroke or Border color on a btnbtn 上的描边或边框颜色
【发布时间】：2017-09-30 21:46:42
【问题描述】：

我想在我的橙色圆圈上画一个笔触，我尝试过使用 div，并给它一个 1px #000000 的边框，但我不太好用。

注意圆圈是完美的圆形，它只是没有字体的 jsfiddle；）

这是我的代码的 jsfiddle。

HTML

<div class="button-circle">
   <a href="pages/solutions.html" class="btn btn-circle page-scroll">
      <i class="fa fa-lock animated"></i>
   </a>
</div>

CSS

.btn-circle {
   width: 70px;
   height: 70px;
   margin-top: 15px;
   padding: 10px 16px;
   border: 3px solid #FC6B0A;
   -webkit-text-stroke: 1px #000000;
   border-radius: 100%!important;
   font-size: 40px;
   color: #FC6B0A;
   background: 0 0;
   -webkit-transition: background .3s ease-in-out;
   -moz-transition: background .3s ease-in-out;
   transition: background .3s ease-in-out;
}

.btn-circle:hover,
.btn-circle:focus {
   outline: 0;
   border: 3px solid #FC580C;
   color: #FC580C;
   stroke: 1px solid #000000;
   background: rgba(192, 192, 192,.6);
}

https://jsfiddle.net/11gb266r/

编辑 1

好的，我想我还不够清楚。我的橙色圆圈里面有一个很棒的字体锁定图标。锁图标有一个文本笔划'-webkit-text-stroke: 1px #000000;'它给图标一个 1px 宽的黑色描边。但我希望实际的圆圈也有一个 1px 的黑色边框/笔划，

【问题讨论】：

你想要有边框的 FA 图标吗？
text-stoke 仅适用于文本。例如，要拥有多色边框，您可以使用带有自己边框的伪元素。
顺便说一句，你真的不需要 FontAwesome 来制作圆形按钮。在这里，一个更新的小提琴：jsfiddle.net/MrLister/11gb266r/6
我已更新问题以使我的问题更清晰

标签： html css twitter-bootstrap button

【解决方案1】：

您可以使用 inset text-shadow 在您的图标周围添加 stroke。

body {
    background-color: #eee;
}

.fa {
  color: white;
  text-shadow: -1px 0 #000,
                0 1px #000,
                1px 0 #000,
                0 -1px #000;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa fa-lock"></span>

【讨论】：