真棒字体5边框颜色

Question

如何在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>

Answer 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然而我绝对不推荐这个，因为我想它可能是一个痛苦的响应管理。这也不是很好的做法，它并不是解决问题的真正办法。

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

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

• Can we add border around the fontawesome icon using css?
• Add border to fa-circle

你也可以尝试切换到word-awesome的CSS web字体版本，看看是否共享问题。这里有一些有用的链接，如果你想这样做：

• https://fontawesome.com/get-started/web-fonts-with-css
• https://fontawesome.com/how-to-use/web-fonts-with-css

---

我找到的最佳解决方案：

我将具有边界半径的普通边框应用于SVG，但是我删除了fa-data-mask属性。这消除了边界之间的任何空间。在这里查看示例：https://codepen.io/anon/pen/NyYMxK