真棒字体5边框颜色答案

【问题标题】：awesome font 5 border color真棒字体5边框颜色
【发布时间】：2018-02-19 18:58:36
【问题描述】：

如何为 Twitter 图标添加边框并将颜色更改为红色？

<div style="font-size:3em; color:green; border-color:red">

边框颜色没有帮助。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<nav class="navbar navbar-dark bg-dark">

  <div style="font-size:3em; color:green">
    <i class="fab fa-twitter" data-fa-transform="shrink-3.5" data-fa-mask="fas fa-circle"></i>
  </div>

</nav>


<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

【问题讨论】：

标签： css font-awesome-5

【解决方案1】：

<i> 标记正在替换为 SVG，因此您需要将样式应用于 SVG。

这是我所做的：

svg {
  border-radius: 50%;
  border: 1px solid red;
}

不幸的是，SVG 在图像中似乎有一个透明边框。这意味着您的图标将在边框和图像之间有一个空间，该空间与 SVG 背景颜色相同。

我不确定您能做多少，因为您的 SVG 似乎是由第三方脚本生成的。您可以使 SVG 背景与边框颜色相同，这将删除图标与其边框之间的任何空间。

这是边框问题的示例（左侧）和我非常有限的修复（右侧）：https://codepen.io/anon/pen/XZEZvL

您也可以像我在这里所做的那样使用另一个 div 来制作边框：https://codepen.io/anon/pen/xYWWrO 但是我绝对不推荐这个，因为我想它可能是一个痛苦的响应式管理。这也不是很好的做法，也不能真正解决问题。

如果这对您来说是一个主要问题，那么我建议将图标作为图像并进行编辑。

额外阅读可能会帮助您解决我发现的这种情况：

您也可以尝试切换到 font-awesome 的 CSS 网络字体版本，看看是否存在同样的问题。如果您想尝试一下，这里有一些有用的链接：

我找到的最佳解决方案：

我对 SVG 应用了一个带边框半径的普通边框，但是我删除了 fa-data-mask 属性。这删除了边界之间的任何空间。在此处查看示例：https://codepen.io/anon/pen/NyYMxK

【讨论】：

谢谢，但现在我无法在背景和边框之间进行无缝过渡，有一个小的白色间隙。即使我把边框变大，白色的间隙仍然存在。
@Ewgi 好的，我更新了答案以反映问题。恐怕我看不到一个简单的解决方法
@Ewgi 我添加了另一个潜在的修复方法，即在 SVG 顶部绝对定位另一个 div 作为边框。我不是很喜欢这个想法，但它确实给了你某种边界
@Ewgi 好的，我想我现在已经正确解决了这个问题，请在粗体文本下阅读我的答案的底部

【解决方案2】：

我将此代码用于 Facebook 图标。它有边框和阴影。您可以将它用于 Twitter 图标。更改 "border-radius: 50%" 设置边框正方形，更改 "border: ... rgb()" 设置颜色

HTML：

<a class="align-items-center justify-content-center  d-flex roundbutton text-decoration-none socialSignInBtns" href="#">
<i class="fab fa-facebook-f fa-fw" aria-hidden="true" style="color: #4267b2"></i>
</a>

CSS：

.socialSignInBtns {
    display: block;
    height: 5vw;
    width: 5vw;
    border-radius: 50%;
    box-shadow: 0px 1px 10px 0px rgb(181, 165, 196);
    border: 5px solid rgb(196, 189, 189);
}


.socialSignInBtns:hover {
    opacity: 0.7;
}

【讨论】：