0

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

4

2 回答 2

0

该<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

于 2018-02-19T19:06:22.237 回答
0

我将此代码用于 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;
}
于 2019-10-03T14:06:54.350 回答