Question

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

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

border-color没有帮助。

＆＃13;

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

＆＃13;

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 但是我绝对不推荐这个，因为我想它可以要负责任地管理是一种痛苦。这也不是很好的做法，它不是解决问题的真正办法。

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

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

你也可以尝试切换到word-awesome的CSS web字体版本，看看是否分享了这个问题。以下是一些有用的链接，如果你想给它一个：

我找到的最佳解决方案：

我将带有边框半径的法线边框应用到SVG，但是我删除了fa-data-mask属性。这消除了边界之间的任何空间。请在此处查看示例： https://codepen.io/anon/pen/NyYMxK

Answer 2

我将此代码用于Facebook图标。它有边界和阴影。您可以将其用于Twitter图标。更改“边框半径：50％”以设置边框正方形，并更改“边框：... 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;
}

真棒字体5边框颜色

2 个答案: